MouseMove 事件每秒重复一次

Question

http://jsfiddle.net/MrkY9/

我的计算机（到目前为止，我的同事中没有其他计算机）在 Chrome、IE 和 Safari 中出现问题（但在 Firefox 中没有）。简单的mousemove 代码，例如以下（已经在上面的小提琴上运行）正确捕获mousemove 事件，但只要鼠标在 div 中，每秒捕获一个mousemove 事件 - 即使我' m 不再移动鼠标。

var number = 0;
$("#foo").on("mousemove", function() { this.innerHTML = number++ });

这似乎是一个基于浏览器的问题，因为它不会在 FireFox 上显示。 （Windows 本身也不会发生这种情况。即使计数器上升，如果我不理会键盘和鼠标，我的屏幕保护程序最终也会启动。）在断定这不是系统问题之前，我尝试更换鼠标并切换它插入的 USB 端口。毫不奇怪，这些解决方案都不能解决问题。

我还没有想出如何在浏览器中使用除 javascript 之外的任何东西进行测试。

问题： 有没有人遇到过这个？我需要做什么才能抓住它吗？我的代码远没有这个依赖于知道鼠标何时移动和不移动的小提琴那么琐碎。

Answer 1

好的，我发现了问题，但我不完全明白为什么会出现问题。

我让任务管理器在后台运行。并且由于某种原因，每次更新自身时，都会导致 IE、Safari 和 Chrome 接收到 mousemove 事件。

这没有意义，但至少修复很简单：关闭任务管理器。

（如果您在“应用程序”选项卡中，这一点非常明显。如果您在“性能”中，则取决于设置的值。）

Answer 2

对我来说，在播放 iTunes 时有时会出现此问题。我知道 iTunes（适用于 Windows）多年来一直存在焦点问题 - 它往往会从自己的弹出窗口中窃取焦点。

您在（已接受）答案中指出了问题：其他应用程序可以窃取浏览器的焦点，随意触发 mousemove 事件。但是，对于实时网站，我们不能假设用户没有运行某些程序，例如任务管理器或 iTunes。

按照问题评论部分的建议，请保存鼠标位置并继续检查是否发生变化。

使用 jQuery 的示例代码：

var old_pos = [0, 0];
$(el).on("mousemove", function(e) {
    var new_pos = [e.clientX, e.clientY];

    // Quit if the mouse position did not change.
    if(old_pos[0] == new_pos[0] && old_pos[1] == new_pos[1])
        return;

    // Your code.
});

（注意：最好将touchmove 事件与touches 和changedTouches 数组一起用于触摸手势。）

希望这对遇到类似问题的人有所帮助。

编辑：根据以下 Scott 的评论将鼠标事件与触摸事件分开的附加功能：

var old_pos = [0, 0];
$(el).on("mousemove touchmove", function(e) {
    var new_pos = [e.clientX, e.clientY];

    // Quit if the mouse position did not change.
    if(e.type == "mousemove" && old_pos[0] == new_pos[0] && old_pos[1] == new_pos[1])
        return;

    // Your code.
});

Answer 3

我遇到了完全相同的问题。对于纯 Javascript，我将 onmousemove 替换为 onmouseover。对于 jQuery，我将 mousemove 替换为 mouseover。对我来说最快的修复。