Javascript 文档事件冒泡可以在Firefox上使用，但不能在Safari或Chrome上使用

实现了一个文档范围的点击事件气泡捕获，这样我就可以拥有一个用于所有按钮点击的函数。但是，这在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);

---

这在FireFox中对我来说很好。下面是一个演示：

不过，还有一些问题/警告

如果元素中有元素，

matches（）

将不起作用，因为单击的元素是内部元素。在这种情况下，您需要使用

closest（）

，它检查选择器是否在选择器中。下面是另一个演示：

匹配（）

和

最近的（）

都需要多填充。它们在较新的浏览器中工作得很好，但较旧的浏览器支持不稳定。这是，还有。或者，您可以使用类似的服务来自动处理此问题

在Firefox中，右键单击触发

单击
事件。没有其他浏览器会以这种方式运行，因此我认为这是一个bug。FF支持者经常说这只是遵守规范，但右键单击事件有一个特殊事件，所以。。。无论如何，您可以通过将
click
事件附加到
document.documentElement
来避免这种怪癖

您的侦听器回调编写得不太理想。整个事情可以这样写：

document.documentElement.addEventListener（'click'，函数（事件）{
//移动按钮点击
if（event.target.closest（“移动菜单按钮”））{
警惕（）；
event.preventDefault（）；
}
}，假）；

无需将

event.target

设置为变量，也无需设置单独的变量来决定是否应

preventDefault（）

。只需将其放入选择器的

if

语句中即可。下面是另一个演示：

---

id在DOM上应该是唯一的。对于本例，使用特定的类名或数据属性作为选择器进入匹配函数更为正确。您是否尝试过

webkitMatchesSelector

？根据MDN中的compat表，它应该对两者都有效。我已将MDN polyfil添加到我的代码中，因此应该有效。请提供您尝试此操作时使用的DOM标记，以及单击的确切位置。console.log打印出按钮子SVG或SVG的子元素，而不是按钮本身谢谢Chris！这是王牌。然而，我的代码在FF中工作，而不是在其他浏览器中工作，这是因为其中的元素。在这种情况下，它似乎不是真的冒泡每说，但简单地停止在最低的元素点击..？啊，好的，所以。。。对于事件冒泡的工作原理来说，这是一个奇怪的技术问题。事件一直冒泡到DOM的顶部。否则，将侦听器添加到

文档

将不起作用。但是

event.target

永远不会更改，并且始终是触发事件的元素。否则，活动委派将永远无法实际工作。仍然感到困惑，但谢谢。我认为，当它冒泡时，它会查看树上的每个节点，直到到达文档，它似乎只点击单击的项目，因此需要壁橱（）不匹配（）-我想我仍然不知道这样做的意义是什么：（在我看来，它一点也不冒泡。在你的例子中，事件监听器附加在

文档

上。首先，它点击单击的元素，然后点击它的父元素，然后点击它的父元素，直到它到达

文档

，然后触发事件监听器回调。但对于每个冒泡的级别，

事件。目标

都是always首先触发事件的元素。如果单击所需元素中的某个元素，这就是

事件。target

和

matches（）

将失败。我不清楚您试图执行的操作。如果您想在更高的元素上捕获事件，则需要更改

If（matches（））的选择器

或

if（closest（））

。还有一个

event.path

属性，它将为您提供整个气泡链，但请记住，它包括您正在侦听的元素的所有内容，在本例中为

文档。