为什么 mouseup 事件不能阻止 click 事件

Question

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

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

我希望这可以防止“点击”事件触发，但事实并非如此。但是，将

mouseup

更改为

mousedown

实际上会阻止点击事件。

我还尝试将

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

事件完成。

Answer 2

终于找到了一种防止点击事件触发的方法。在最新的 Chromium 和 Firefox 上进行了测试。这可能是一些错误或实现细节。

解决方案

处理

onpointerdown

或

onpointerup

事件，移除元素并将其插入到相同位置。

<span>
    <button onpointerdown="let parent = this.parentElement; this.remove(); parent.appendChild(this);" onclick="alert();">TEST</button>
</span>

结果

onpointerdown
onmousedown
onpointerup
onmouseup
<-- no click event occures

Answer 3

我只想提供解决此问题的方法：

let click_works = true
this.addEventListener('mousedown', e => {
    click_works = // condition why the click may work or not
})
this.addEventListener('click', e => {
    if (click_works) // Do your stuff
})

希望它能对某人有所帮助。