Перемещение событий в документах работает в Firefox, но не в Safari или Chrome

Question

Реализован захват пузырьков событий всего документа, чтобы у меня была одна функция для всех нажатий кнопок.Тем не менее, это отлично работает в Firefox, но не в других браузерах (Chrome), где вы не получите предупреждение.

document.addEventListener('click', function (event) {

    var preventClickAction = false;

    // get clicked element
    var clickedElem = event.target;

    // mobile button click
    if(clickedElem.matches("#mobile-menu-button")){
        alert();

        preventClickAction = true;
    }

    if(preventClickAction){
        event.preventDefault();
    }

}, false);

Answer 1

Это нормально работает для меня в FireFox.Вот демонстрация: https://codepen.io/cferdinandi/pen/WPxjVR

Однако есть несколько проблем / предостережений.

1. Если внутри вашего элемента есть элемент, matches() не будет работать, потому что нажалиЭлемент является внутренним элементом.В этом случае вам нужно будет использовать closest(), который проверяет, имеет ли селектор или находится в пределах селектора.Вот еще одна демонстрация: https://codepen.io/cferdinandi/pen/pGbPmw
2. И matches(), и closest() нуждаются в заполнении.Они отлично работают в новых браузерах, но более старые имеют пятнистую поддержку.Вот один для matches() и один для closest().В качестве альтернативы, вы можете использовать сервис типа https://polyfill.io для автоматической обработки.
3. В Firefox щелчок правой кнопкой мыши запускает событие click.Ни один другой браузер не ведет себя так, поэтому я считаю, что это ошибка.Сторонники FF часто говорят, что это просто соответствует спецификации, но есть специальное событие для событий щелчка правой кнопкой мыши, так что ... В любом случае, вы можете избежать этой причуды, прикрепив вместо этого ваше событие click к document.documentElement.

4. Ваш обратный вызов слушателя написан неоптимально.Все это можно записать так:

   document.documentElement.addEventListener('click', function (event) {
   
       // mobile button click
       if(event.target.closest("#mobile-menu-button")){
           alert();
           event.preventDefault();
       }
   
   }, false);
   

   Нет необходимости устанавливать event.target в качестве переменной, а также вам не нужно устанавливать отдельную переменную, чтобы решить, следует ли вам preventDefault() или нет.Просто вставьте это в ваш оператор if для селектора.Вот еще одна демонстрация: https://codepen.io/cferdinandi/pen/wNWeMo