MouseMove 事件未在 Chrome 中触发

Question

我为触发 function 的mousemove添加了一个事件侦听器。出于某种原因，它没有在 Chrome 中触发。 我可以说出来，因为我在测试期间正在写控制台。 keyup事件eventlistener器和scroll事件eventlistener器都会触发，但mousemove不会在 Chrome 中触发。 它在 Safari 和 FireFox 中工作正常。这是我的代码：

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

它触发的 function：

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"));
}

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>

那么你应该很高兴去。 住在这里

Answer 2

我知道这是一篇旧帖子，但我遇到了同样的问题，并意识到是什么导致了我的问题。

如果您使用的是 Chrome 的开发人员工具并打开了设备工具栏，则如果控制台处于打开状态，控制台将不会记录 mousemove 事件。 如果在设备工具栏打开时关闭控制台并移动鼠标，则会记录 mousemove 事件。

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

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

在此处输入图像描述

Answer 3

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

Answer 4

关闭设备工具栏，chrome devtool左上角，ctrl+shift+m

Answer 5

感谢大家的投入。 我没有发布 HTML，因为我认为没有必要。 网络应用程序非常复杂，所以我把它排除在外。 长话短说，如果我在移动鼠标的同时观看控制台，则鼠标移动不会记录在控制台中。 单击会触发 mousemove 事件，并且 scroll 和 keyup 事件会记录在控制台中，但 mousemove 不会。 我是通过关闭控制台，移动鼠标，然后查看控制台来发现的。 瞧！ 鼠标移动已被记录。

我更改了我的代码，以便在测试期间更容易调试。

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

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