实现了文档范围的单击事件气泡捕获,因此我可以为所有按钮单击提供一个功能。但是,这在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中,这对我来说工作正常。这是一个演示:https://codepen.io/cferdinandi/pen/WPxjVR

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


如果您的元素中有一个元素,则matches()将不起作用,因为被单击的元素是内部元素。在这种情况下,您需要使用closest(),它检查选择器是否在选择器中或在选择器之内。这是另一个演示:https://codepen.io/cferdinandi/pen/pGbPmw
matches()closest()都需要polyfill。它们在较新的浏览器中可以很好地工作,但较旧的浏览器则支持不一。这是one for matches()one for closest()。另外,您可以使用https://polyfill.io之类的服务来自动处理此问题。
在Firefox中,右键单击会触发click事件。没有其他浏览器以这种方式运行,因此我认为这是一个错误。 FF支持者经常说这只是遵循规范,但是右键单击事件有一个特殊事件,因此...无论如何,您可以通过将click事件附加到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()。只需将其放在选择器的if语句中即可。这是另一个演示:https://codepen.io/cferdinandi/pen/wNWeMo

关于javascript - 文档事件冒泡在Firefox上有效,但在Safari或Chrome上无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54402108/

10-11 22:51
查看更多