javascript - 为什么 mouseup 事件不能阻止点击事件

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 实际上会阻止点击事件。

我也试过将 useCapture 参数设置为 true，但是这也不会产生所需的 mouseup 行为。我已经在 Chrome 和 Firefox 上测试过了。在我提交错误之前，我想我应该在这里问一下。

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

我查看了 W3C standard (DOM level 2) ，我找不到任何可以解释这种行为的东西，但我可能漏掉了一些东西。

在我的特殊情况下，我试图解耦监听同一元素上的事件的两段代码，我认为在具有优先级的部分使用捕获事件将是解决此问题的最优雅方法，但是然后我遇到了这个问题。 FWIW，我只需要支持官方支持的 FF 和 Chrome 版本(包括 FF 的 ESR)。

Answer 1

Check out this quirksmode article

点击事件:

Fires when a mousedown and mouseup event occur on the same element.

所以当鼠标点击被释放时，mouseup 和 click 事件都会被触发，click 不会等待 mouseup 回调完成。 mouseup 和 click 几乎总是可以同义使用。

为了取消 click，就像你演示的那样，你可以在 mousedown 事件回调中返回 false 以防止 点击事件从完成。