<div class='wrapper'>
<button class='child'>Click me</button>
</div>
function h(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
alert(e.type);
return false;
}
document.querySelector('.wrapper').addEventListener('mouseup', h, false);
document.querySelector('.child').addEventListener('click', h, false);
我希望这样做可以阻止'click'事件的触发,但事实并非如此,然而,将mouseup
更改为mousedown
确实阻止了click事件的触发。
我也尝试过将useCapture
参数设置为true,但这也不能在mouseup
上产生预期的行为。我已经在Chrome和Firefox上测试过了。在我提交bug之前,我想我应该在这里问一下。
这是当前浏览器中的一个bug,还是记录在案的行为?
我回顾了W3C标准(DOM级别2),没有找到任何可以解释这种行为的内容,但我可能漏掉了一些东西。
在我的特殊情况下,我尝试将监听同一元素上的事件的两段代码解耦,我认为在具有优先级的部分使用捕获事件是解决这个问题的最佳方法,但后来我遇到了这个问题。FWIW,我只需要支持官方支持的FF和Chrome版本(包括用于FF的ESR)。
3条答案
按热度按时间vddsk6oq1#
Check out this quirksmode article
click
事件:在同一元素上发生mousedown和mouseup事件时激发。
因此,当释放鼠标单击时,
mouseup
和click
事件都会被触发,click
不会等待mouseup
回调完成。几乎总是,mouseup
和click
可以用作同义词。为了取消
click
,如您所演示的,您可以在mousedown
事件回调中返回false
,以阻止click
事件完成。pftdvrlh2#
我只是想提供我的工作围绕这个问题:
希望能帮到人。
aelbi1ox3#
终于找到了一个防止点击事件触发的方法。在最新的Chrome和Firefox上测试过。可能是一些bug或者实现细节。
处理
onpointerdown
或onpointerup
事件,移除元素并将其插入相同位置。