javascript - 文档事件冒泡适用于 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