Изотоп: дочерние элементы внутри тега кнопки, такие как изображение или интервал, делают кнопку неактивной - PullRequest
Новая
       41

Изотоп: дочерние элементы внутри тега кнопки, такие как изображение или интервал, делают кнопку неактивной

0 голосов
/ 10 ноября 2019

Я немного изменил Дейв ДеСандро Изотоп пример Комбинированные фильтры с функцией, ванильный JS :

Внутри тега <button> я вставил <picture> иa <span> tag: 

<button class="button" data-filter=".red">
  <picture>
    <source data-srcset="https://via.placeholder.com/30/f00/ 1x, https://via.placeholder.com/30/f00/ 2x" type=image/webp>
    <source data-srcset="https://via.placeholder.com/30/f00/ 1x, https://via.placeholder.com/30/f00/ 2x">
    <img class=l src=https://via.placeholder.com/30/f00/ loading=eager alt>
  </picture>
  <span>red</span>
</button>

Пример: https://codepen.io/dash/pen/NWWBqjW

Теперь, когда вы непосредственно нажимаете на дочернюю * img или span область кнопки (цветовой фильтр красный и синий), Ничего не произошло. Интересно, как сделать всю кнопку нажатой.

1 Ответ

0 голосов
/ 10 ноября 2019

Установка правила CSS .button > * {pointer-events: none} решает проблему.

Но, возможно, существует более элегантный способ сделать кнопку нажатой, даже если она имеет дочерние элементы. Есть идеи?

...