javascript 为什么 mouseup 事件不能阻止点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18342747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't a mouseup event prevent a click event
提问by beatgammit
<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);
I expect this to prevent the 'click' event from firing, but it doesn't. However, changing mouseupto mousedowndoes in fact prevent the click event.
我希望这可以防止触发 'click' 事件，但事实并非如此。但是，更改mouseup为mousedown实际上确实阻止了单击事件。
I've also tried setting the useCaptureargument to true, and that also doesn't produce the desired behavior with mouseup. I've tested this on Chrome and Firefox. Before I file bugs, I figured I'd ask here.
我还尝试将useCapture参数设置为 true，但这也不会产生mouseup. 我已经在 Chrome 和 Firefox 上测试过了。在我提交错误之前，我想我会在这里问。
Is this a bug in current browsers, or is it documented behavior?
这是当前浏览器中的错误，还是记录在案的行为？
I've reviewed the W3C standard (DOM level 2), and I wasn't able to find anything that could explain this behavior, but I could have missed something.
我已经查看了W3C 标准（DOM 级别 2），但我找不到任何可以解释这种行为的内容，但我可能遗漏了一些东西。
In my particular case, I'm trying to decouple two pieces of code that listen to events on the same element, and I figured using capture events on the part that has priority would be the most elegant way to solve this, but then I ran into this problem. FWIW, I only have to support officially supported versions of FF and Chrome (includes ESR for FF).
在我的特定情况下，我试图将两段侦听同一元素上的事件的代码解耦，我认为在具有优先级的部分上使用捕获事件将是解决这个问题的最优雅的方法，但后来我跑了进入这个问题。FWIW，我只需要支持官方支持的 FF 和 Chrome 版本（包括 FF 的 ESR）。
回答by Joseph Spens
Check out this quirksmode article
The clickevent:
该click事件：
Fires when a mousedown and mouseup event occur on the same element.
当 mousedown 和 mouseup 事件发生在同一个元素上时触发。
So when the mouse click is released, both the mouseupand clickevents are fired, clickdoesn't wait for the mouseupcallback to finish. Almost always, mouseupand clickcan be used synonymously.
所以当鼠标点击被释放时，mouseup和click事件都会被触发，click不会等待mouseup回调完成。几乎总是，mouseup并且click可以用作同义词。
In order to cancel the click, like you demonstrated, you can return falsein the mousedownevent callback which prevents the clickevent from ever completing.
为了取消click，就像您演示的那样，您可以false在mousedown阻止click事件完成的事件回调中返回。
回答by Tiago Coelho
As Joseph Spens said, cancelling on the mousedown will stop the click event from being triggered
正如约瑟夫斯宾斯所说，取消鼠标按下将阻止点击事件被触发
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>