为什么Chrome在鼠标按下时会触发mousemove事件？

Question

我注意到在Chrome中（我使用的是Chrome 35.0.1916.114 [更新：在“35.0.1916.153 m”中也会发生），Windows 7 64位），当我点击左键时，不仅会触发mouseDown事件（正如我所期望的），还会触发mouseMove。

在这个JSFiddle中，如果你在输入框中点击，你会看到每次mouseDown事件都会出现一个'D'，每次mouseMove事件都会出现一个'M'。

HTML:

<input id="txt" type="text"/>
<p>Moves</p><p id="moves">0</p>
<p>Downs</p><p id="downs">0</p>
<p id="activity">Activity</p>

JS：

$( "#txt" ).mousedown(function() {
     document.getElementById("activity").innerHTML +="D";
    update(false,true);
});
$( "#txt" ).mousemove(function() {
    document.getElementById("activity").innerHTML +="M";
    update(true,false);
});

function update(move, down) 
{
    var moves=document.getElementById("moves").innerHTML;
    if (move) 
    {
        moves ++;
        document.getElementById("moves").innerHTML=moves;
    }

    var downs=document.getElementById("downs").innerHTML;
    if (down) 
    {
        downs ++;
        document.getElementById("downs").innerHTML=downs;
    }
    var d=parseInt(downs);
    var m=parseInt(moves);
    if ((d+m)%25==0)
    {
        document.getElementById("activity").innerHTML +="<br>";
    }
}

在Firefox和IE11中，一旦光标位于输入元素中，您可以连续获取'D'（即，单击会引发一个mouseDown事件）。在Chrome中，每次鼠标点击都会触发一个mouseDown和两个mouseMove事件。

这不是由于鼠标轻微晃动造成的，因为我使用的是轨迹球，所以光标完全静止。

有人知道解决方法吗？

谢谢 Dave

- Badgerspot

---

不会发生在我的Chrome版本上：35.0.1916.153（官方构建274914），运行在Linux系统上。 - Robby Cornelissen

在onmove处理程序中存储鼠标位置。如果您收到另一个onmove事件，其中当前坐标与上次相同，则知道这是单击而不是移动。 - enhzflep

我可以使用最新的Chrome（35.0.1916.153 m）和Windows 8来复制。网络上有很多讨论，但没有具体的解决方案。我认为这一定是一个jQuery / Chrome问题，也许值得提交一个错误报告。供参考，我正在使用触摸板，因此鼠标不可能移动。 - m.edmondson

这个令人烦恼的问题今天仍然存在，即使使用最新版本的Chrome（43.0.2357.124 m）。 - light

@FabioTurati - 这里有个 Bug：https://bugs.chromium.org/p/chromium/issues/detail?id=161464 - Sphinxxx

Answer 1

确实是一个奇怪的问题，但是通过一些标志可以绕过这个问题：http://jsfiddle.net/3a28p7ek/

更改非常简单，在每次鼠标按下时将ignoreNextMove设置为true，如果设置了此标志，则取消移动处理程序，并在重置标志后使常规移动事件得到正确处理：

ignoreNextMove = false;

$( "#txt" ).mousedown(function() {
    ignoreNextMove = true;
    document.getElementById("activity").innerHTML +="D";    
    update(false,true);
});
$( "#txt" ).mousemove(function() {
        if(ignoreNextMove)
    {
        ignoreNextMove = false;
        return;
    }
    document.getElementById("activity").innerHTML +="M";
    update(true,false);
});

- garglblarg

---

应该可以工作，但我希望能找到一个更令人满意的答案。 - Mephiztopheles