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

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

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

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

我已经查看了W3C standard (DOM level 2)，但我无法找到任何可以解释此行为的内容，但我可能错过了一些内容。

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

Answer 1

Check out this quirksmode article

click事件：

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

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

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

Answer 2

正如Joseph Spens所说，取消mousedown将阻止点击事件被触发

function log(msg){
    logBox.innerHTML += '<li>' + msg + '</li>'
}

function onMousedown(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}



function onMouseup(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}



function onClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}

document.querySelector('.child').addEventListener('mousedown', onMousedown, false);
document.querySelector('.child').addEventListener('mouseup', onMouseup, false);
document.querySelector('.child').addEventListener('click', onClick, false);
var logBox = document.querySelector('.log')

<div class='wrapper'>
    <button class='child'>Click me</button>
    <ul class="log">
    </ul>
</div>

Answer 3

Sames返回false无效

function log(msg){
    logBox.innerHTML += '<li>' + msg + '</li>'
}

function onMousedown(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}



function onMouseup(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}



function onClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    log(e.type);
    return false;
}

document.querySelector('.child').addEventListener('mousedown', onMousedown, false);
document.querySelector('.child').addEventListener('mouseup', onMouseup, false);
document.querySelector('.child').addEventListener('click', onClick, false);
var logBox = document.querySelector('.log')

<div class='wrapper'>
    <button class='child'>Click me</button>
    <ul class="log">
    </ul>
</div>

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

3 个答案: