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

l0oc07j2  于 2022-12-28  发布在  Java
关注(0)|答案(3)|浏览(507)

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确实阻止了click事件的触发。
我也尝试过将useCapture参数设置为true,但这也不能在mouseup上产生预期的行为。我已经在Chrome和Firefox上测试过了。在我提交bug之前,我想我应该在这里问一下。
这是当前浏览器中的一个bug,还是记录在案的行为?
我回顾了W3C标准(DOM级别2),没有找到任何可以解释这种行为的内容,但我可能漏掉了一些东西。
在我的特殊情况下,我尝试将监听同一元素上的事件的两段代码解耦,我认为在具有优先级的部分使用捕获事件是解决这个问题的最佳方法,但后来我遇到了这个问题。FWIW,我只需要支持官方支持的FF和Chrome版本(包括用于FF的ESR)。

vddsk6oq

vddsk6oq1#

Check out this quirksmode article
click事件:
在同一元素上发生mousedown和mouseup事件时激发。
因此,当释放鼠标单击时,mouseupclick事件都会被触发,click不会等待mouseup回调完成。几乎总是,mouseupclick可以用作同义词。
为了取消click,如您所演示的,您可以在mousedown事件回调中返回false,以阻止click事件完成。

pftdvrlh

pftdvrlh2#

我只是想提供我的工作围绕这个问题:

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

希望能帮到人。

aelbi1ox

aelbi1ox3#

终于找到了一个防止点击事件触发的方法。在最新的Chrome和Firefox上测试过。可能是一些bug或者实现细节。

    • 解决方案**

处理onpointerdownonpointerup事件,移除元素并将其插入相同位置。

<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

相关问题