Chrome中MouseMove事件未触发

Question

我添加了一个mousemove事件监听器，触发一个函数。不知何故，在Chrome浏览器中没有被触发。我可以看到这一点，因为在测试期间我正在写入控制台。keyup和scroll的eventlistener都能触发，但是mousemove在Chrome中无法触发。在Safari和FireFox中它正常工作。以下是我的代码：

document.body.addEventListener("mousemove", RenewTimeoutTime);
document.body.addEventListener("keyup", RenewTimeoutTime);
document.body.addEventListener("scroll", RenewTimeoutTime);

它触发的功能：

function RenewTimeoutTime(){
    var pageName = window.location.href;
    var currentTime = new Date();
    localStorage.setItem("inTimeout", false);
    localStorage.setItem("AI_Timeout_Time", currentTime.getTime() + 270000;
    console.log(localStorage.getItem("AI_Timeout_Time"));
}

- npayne

---

请在jsFiddle上发布一个能够说明您问题的功能性示例。 - palaѕн

是的，加上括号后它可以工作，我也试过了。但如果这是个问题，scroll和keyup事件也将无法正常工作。 - Alex M

不是user2181397，我只是复制粘贴代码时漏掉了）。它在实时代码中。 - npayne

这可能是因为我在MAC上使用Chrome吗？ - npayne

你的 HTML 长什么样？ - Frank Tan

Answer 1

它是可行的，你只需要先检查DOM是否已经加载。

用以下代码替换当前脚本：

<script>
document.addEventListener('DOMContentLoaded', addListen, false);  //this is the important bit

function addListen(){
    document.body.addEventListener("keyup", RenewTimeoutTime);
    document.body.addEventListener("scroll", RenewTimeoutTime);
    document.body.addEventListener("mousemove", RenewTimeoutTime);
}

function RenewTimeoutTime(){
    var pageName = window.location.href;
    var currentTime = new Date();
    var time = currentTime.getTime();    //i replaced the time just to be neat
    localStorage.setItem("inTimeout", false);
    localStorage.setItem("AI_Timeout_Time", time + 270000);
    console.log(localStorage.getItem("AI_Timeout_Time"));
}
</script>

然后你就可以开始了。关于这里的实况。

- Rachel Gallen

---

已在Mac和PC上进行了测试。 - Rachel Gallen

Answer 2

我知道这是一个旧帖子，但我遇到了相同的问题，并意识到在我的情况下是什么导致了这个问题。

如果您正在使用Chrome的开发者工具并已经切换了设备工具栏，则控制台将不会记录mousemove事件，如果控制台处于打开状态。如果您关闭设备工具栏而鼠标移动，则mousemove事件将被记录。

如果您关闭设备工具栏，则应在控制台中看到事件记录。

在Windows PC上切换设备工具栏的快捷键为Control + Shift + M。我想在Mac上是Command + Shift + M，但不要引用我。

输入图像描述

- Robbyo

---

这真是太奇怪了，不过谢谢你的提示！ - undefined

Answer 3

问题似乎是“mousemove”事件在控制台打开时很少触发（仅在画布点击时触发）。如果控制台关闭，则在鼠标在屏幕上移动时它们将持续触发。

- Jared Schiffman

---

有趣。你有一个参考链接，这样我可以更深入地了解吗？ - SherylHohman

相反地，我发现当控制台打开时，“mousemove”事件更频繁地触发，而其他情况下则较少。不确定原因。 - Tom Charles Zhang

Answer 4

关闭设备工具栏，位于Chrome开发者工具的左上角，快捷键Ctrl+Shift+M

- Alessandro Zerbini

Answer 5

感谢大家的输入。我没有发布HTML，因为我认为这不是必要的。Web应用程序非常复杂，所以我将其留了出来。长话短说，如果我在移动鼠标时观察控制台，则鼠标移动不会记录在控制台中。单击将触发mousemove事件，滚动和keyup事件确实记录在控制台中，但mousemove事件没有记录。我通过关闭控制台、四处移动鼠标，然后查看控制台发现了这个问题。啊哈！mousemove事件被记录了。

我更改了我的代码以便于测试时进行更轻松的调试。

window.addEventListener("mousemove", function(){console.log("mouse move");});
window.addEventListener("keyup", function(){console.log("keyup");});
window.addEventListener("scroll", function(){console.log("scroll");});

如果有人知道为什么在使用开发者工具时控制台不会记录mousemove，请告诉我。

- npayne

---

它在使用开发者工具时记录日志：请查看http://rachelgallen.com/listeners.html（我已经给它设置了高度，现在它实时记录mousemove）。我注意到你已经养成了发布自己答案的习惯。学会接受答案http://stackoverflow.com/help/accepted-answer这样你就可以获得声誉和回答者一样。 - Rachel Gallen

无论在DOMContentLoaded事件侦听器的末尾放置true还是false，效果是相同的：http://www.rachelgallen.com/listeners1.html页面上设置为false，而另一个页面listeners.html则设置为true。 - Rachel Gallen