文档事件冒泡适用于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()都需要填充。它们在较新的浏览器中运行良好，但较旧的浏览器有很多支持。这是one for matches()和one for 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