mouseup 事件停止 firefox 上的点击事件

Question

我有一个奇怪的问题！

在 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/

Answer 1

您需要了解

之间的区别

mousedown : [简单事件] 当任何鼠标按钮 (left/middle/right) 按下即按下时触发

mouseup：[简单事件] 当任何鼠标按钮 (left/middle/right) 向上即释放时触发

点击：[复杂事件] 在鼠标按钮按下并弹起时触发，在此完整循环之后。

因为我们正在向 BASIC SIMPLE EVENTS 添加侦听器，所以 CLICK 事件永远不会被触发！

更多信息在 http://javascript.info/tutorial/mouse-events

Answer 2

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

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

当您在 mousedown 上修改 innerHTML 时，您用一个新的 TextNode 替换了一个 Node（一个 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>

mouseup 事件停止 firefox 上的点击事件

the mouseup event stop the click event on firefox

javascript

firefox

click

mouseup

mousedown