19

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 标准（DOM 级别 2），但我找不到任何可以解释这种行为的东西，但我可能遗漏了一些东西。

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

4

1 回答 1

2

看看这篇 quirksmode 文章

事件click：

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

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

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

于 2013-10-17T20:11:39.440 回答