javascript - mouseup 事件停止 firefox 上的 click 事件

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

问题(我称之为错误)似乎是对innerHTML 的修改。

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

当您修改 mousedown 上的innerHTML 时，您用新的 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>