Используя javascript, как пропустить или удалить e.stopPropagation () из определенных имен классов в элементе? - PullRequest
Новая
       4

Используя javascript, как пропустить или удалить e.stopPropagation () из определенных имен классов в элементе?

0 голосов
/ 11 июля 2020

Используя javascript, как пропустить или удалить e.stopPropagation () из имен определенных классов в элементе. В этом случае класс .trigger в .dropdown? 

<div class="dropdown">
    <a href="#" class="trigger edit">Edit</a>
    <a href="#" class="trigger delete">Delete</a>
    <div class="content">
        <p>Some Text</p>
    </div>
</div>

JS

document.querySelector(".dropdown").addEventListener("click", e => {
    e.stopPropagation();
})

1 Ответ

1 голос
/ 11 июля 2020
  • Go для Event.target, который даст вам точный элемент, на который щелкнули (не обязательно тот, к которому прикреплено событие! (.dropdown) в вашем конкретном c случае )
  • Имея этот элемент target , пройдитесь по DOM, начиная (и включая) этот элемент вверх по цепочке предков в поисках Element.closest()
  • Используйте оператор if, чтобы узнать, найден ли этот элемент: 

document.querySelector(".dropdown").addEventListener("click", e => {
  const elClassTrigger = e.target.closest(".trigger");
  if ( elClassTrigger ) e.stopPropagation();
});
<div class="dropdown">
    <a href="#" class="trigger edit">Edit</a>
    <a href="#" class="trigger delete">Delete</a>
    <div class="content">
        <p>Some Text</p>
    </div>
</div>

Важно:

в качестве примечания, Event.stopPropagation() никогда не следует использовать . Нет ни одного действительного аргумента в пользу того, чтобы остановить событие от всплытия DOM и, следовательно, уведомления других уровней в вашем приложении о том, что что-то произошло. И это может вызвать проблемы.

Просто небольшой пример:

Представьте себе настраиваемый раскрывающийся список и настраиваемое модальное окно, которые закрываются, если щелкнуть где-то снаружи - в документе . Скажем, модальное окно открыто, и вы нажимаете за пределами (в wi sh, чтобы закрыть его), но ваш щелчок попадает в выпадающий элемент. Поздравляем, раскрывающийся список открылся, но модальное окно не закрылось, так как событие не распространялось для уведомления его слушателя. Еще смешнее было бы увидеть, как раскрывающийся список внезапно наведен на модальное окно с более высоким z-index в CSS! Вы уловили идею.

...