实现了文档范围的单击事件气泡捕获,因此我可以为所有按钮单击提供一个功能。但是,这在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/pGbPmwmatches()
和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/