为什么mouseup事件无法阻止click事件

Question

的jsfiddle

<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);

我希望这可以防止"点击"事件被触发,但事实并非如此.但是,更改mouseup为mousedown确实会阻止click事件.

我也尝试将useCapture参数设置为true,这也不会产生所需的行为mouseup.我在Chrome和Firefox上测试了这个.在我提交错误之前,我想我会问这里.

这是当前浏览器中的错误,还是记录的行为？

我已经回顾了W3C标准(DOM级别2),我无法找到任何可以解释这种行为的东西,但我可能错过了一些东西.

在我的特殊情况下,我试图解耦两个侦听同一元素上的事件的代码,我认为在优先级的部分使用捕获事件将是解决这个问题的最优雅的方法,但后来我跑了陷入这个问题.FWIW,我只需支持官方支持的FF和Chrome版本(包括FF的ESR).

Answer 1

查看这篇怪异模式文章

事件click：

当同一元素上发生 mousedown 和 mouseup 事件时触发。

因此，当释放鼠标单击时，mouseup和click事件都会被触发，click不会等待mouseup回调完成。几乎总是，mouseup并且click可以作为同义词使用。

为了取消click，就像您演示的那样，您可以false在mousedown事件回调中返回，这会阻止click事件完成。