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

但是，有一些问题/问题。

如果元素内部有一个元素，则matches()将不起作用，因为被单击的元素是内部元素。在这种情况下，您需要使用closest()，它检查选择器是否在选择器中。这是另一个演示：https://codepen.io/cferdinandi/pen/pGbPmw
matches()和closest()都需要填充。它们在较新的浏览器中可以很好地工作，但较旧的浏览器则支持不一。这是one for matches()和one for closest()。另外，您可以使用https://polyfill.io之类的服务来自动处理此问题。
在Firefox中，右键单击会触发click事件。没有其他浏览器以这种方式运行，因此我认为这是一个错误。 FF支持者经常说这只是遵循规范，但是右键单击事件有一个特殊事件，因此...无论如何，您可以通过将click事件附加到{{1} }。
您的侦听器回调未达到最佳状态。整个事情可以这样写：
```
document.documentElement
```
无需将document.documentElement.addEventListener('click', function (event) { // mobile button click if(event.target.closest("#mobile-menu-button")){ alert(); event.preventDefault(); } }, false);设置为变量，也无需设置单独的变量来决定是否应event.target。只需将其放入选择器的preventDefault()语句中即可。这是另一个演示：https://codepen.io/cferdinandi/pen/wNWeMo

文档事件冒泡在Firefox上有效，但在Safari或Chrome上无效

1 个答案: