Question

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

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事件？

Answer 1

我使用jQuery做了一个解决方法（对我来说更简单，我确信它可以适用于普通的js）。似乎没有人相信这种情况正在发生，但它也适用于Chrome。（我把鼠标放在空中，它不可能移动。）Chrome有一个现有的 bug 。我无法在FireFox中重现它。

无论如何，这是我提出的解决方案。这里有一个演示： 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，等待非常短时间，然后重新绑定它。

关于javascript鼠标事件的困惑

1 个答案: