关于Javascript鼠标事件的困惑

Confusion about Javascript mouse event

本文关键字：事件 Javascript 鼠标 关于      更新时间：2023-09-26

我写了一个回调函数来记录鼠标事件：

var body = document.querySelector("body");
var callback = function (e) {
    console.log(e.type);
}
body.addEventListener('mousedown', callback, false);
body.addEventListener('mouseup', callback, false);
body.addEventListener('mousemove', callback, false);

让我困惑的是，当我点击时，除了触发mousedown和mouseup事件外，它还会触发mousemove事件。

在此处观看演示：http://jsfiddle.net/r6Gqn/1/

为什么我不移动鼠标，而是触发mousemove事件？如何停止触发mousemove事件？

我使用jQuery做了一个变通方法（对我来说更容易，我相信它可以适用于普通的js）。似乎没有人相信这会发生，但我在Chrome中也会发生。（我把鼠标举在空中，它不可能移动。）Chrome存在一个错误。我无法在火狐中复制它。

不管怎样，这是我想出的解决办法。这里有一个演示：JsFiddle

$('#box').bind('mousemove', moved);
function moved() {
    console.log('mousemove');
}
$('#box').mousedown(function (ev) {
    console.log("mousedown");
});
$('#box').mouseup(function () {
    $("#box").unbind("mousemove");
    console.log("mouseup");
    setTimeout(function () {
        $("#box").bind("mousemove", moved);        
    }, 1);
});

基本上，这会修改mouseup事件以解除绑定mousemove，等待很短的时间，然后重新绑定它。

相关文章：