mouseup事件停止firefox上的click事件

the mouseup event stop the click event on firefox

本文关键字：事件 上的 click firefox mouseup      更新时间：2023-09-26

我有一个奇怪的问题！

在div元素上，我监听mousedown、mouseup和click事件。

但在firefox上，点击事件永远不会起作用！在Chromium或Trident上（哇）它工作得很完美。如果元素是一个按钮，它可以工作，但不能在div.上工作

<div>click me</div>
<script>
    var div = document.querySelector('div');
    function fn(e)
    {
        if(e.target === div)
            div.innerHTML = 'event ' + e.type;
    }
    // work
    div.addEventListener('mousedown',fn);
    // work
    div.addEventListener('mouseup',fn);
    // nop !
    div.addEventListener('click',fn);
    // nothing !
    document.addEventListener('click',fn,true);
</script>

https://jsfiddle.net/aL7q8qpv/7/

问题（我称之为bug）似乎是对innerHTML的修改。

根据规范，当mousedown和mouseup对同一目标（元素）开火时，应该触发点击。

当您在mousedown上修改innerHTML时，您将一个Node（一个TextNode）替换为一个新的TextNode，mouseup的目标似乎发生了变化。

但这不是预期的行为，因为目标应该是ElementNode，而不是TextNode（它仍然是同一个Element）。

可能的修复方法：修改现有TextNode的内容，而不是innerHTML:

var div = document.querySelector('div');
function fn(e)
{
	div.firstChild.data='Event:'+e.type;
}
div.addEventListener('mousedown',fn);
div.addEventListener('mouseup',fn);
div.addEventListener('click',fn);
<div>
  click me
</div>

您需要了解之间的区别

鼠标按下：[SIMPLE EVENT]当任何鼠标按钮（左/中/右）按下时激发，即按下

鼠标向上：当任何鼠标按钮（左/中/右）向上时触发，即释放

单击：在完成此循环后，当鼠标按钮向下并向上时激发[复杂事件]。

当我们向BASIC SIMPLE EVENTS添加监听器时，CLICK事件永远不会被触发！

更多信息，请访问http://javascript.info/tutorial/mouse-events

相关文章：