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

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

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

当你在mousedown上修改innerHTML时，用一个新的TextNode替换一个Node（一个TextNode），mouseup的目标似乎会改变。

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

可能的解决方法：修改现有TextNode的内容而不是innerHTML：

＆＃13;

[object Object]

＆＃13;

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

＆＃13;

Answer 2

您需要了解

之间的区别

mousedown ：[简单事件]当任何鼠标按钮（左/中/右）变为向下，即按下

时触发

mouseup ：[SIMPLE EVENT]当任何鼠标按钮（左/中/右）上升即释放时触发

点击：[COMPLEX EVENT]在完成此完整周期后，当鼠标按钮熄灭并出现时触发。

当我们将监听器添加到BASIC SIMPLE EVENTS时，CLICK事件永远不会被解雇！

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

mouseup事件在firefox上停止click事件

2 个答案: