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 : [简单事件] 当任何鼠标按钮（左/中/右）向下即按下时触发

mouseup : [简单事件] 当任何鼠标按钮（左/中/右）向上即释放时触发

click : [COMPLEX EVENT] 在此完整循环之后，当鼠标按钮按下和升起时触发。

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

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

Answer 2

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

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

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

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

可能的修复： 修改现有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>