MouseMove 事件未在 Chrome 中触发

Question

I have added an event listener for mousemove that triggers a function. For some reason, it is not getting triggered in Chrome. I can tell because I'm writing to the console during testing. The keyup eventlistener and the scroll eventlistener both trigger, but the mousemove does not in Chrome. It works fine in Safari and FireFox. Here is my code:

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

And the function it triggers:

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

It does work, you just have to check if the DOM is loaded first.

Replace the current script with

<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>

Then you should be good to go. Live here

Answer 2

I know this is an old post but I ran into the same issue mentioned and realized what was causing the issue in my case.

If you are using Chrome's developer tools and have the Device Toolbar toggled on, the console will not log the mousemove events if the console is open. If you close the console while the Device Toolbar is toggled on and move your mouse, the mousemove events will log.

If you toggle the Device Toobar off, you should see the events logging in the console.

The shortcut for toggling the Device Toolbar on a Windows PC is Control + Shift + M. I imagine it's Command + Shift + M on a Mac but don't quote me.

enter image description here

Answer 3

The issue seems to be that "mousemove" events are fired infrequently (only on canvas clicks) when the console is open . If the console is closed, they are fired continuously, when the mouse is moved around the screen.

Answer 4

turn off the device toolbar, upper left side of the chrome devtool, ctrl+shift+m

Answer 5

Thank you all for your input. I didn't post the HTML because I didn't think it was necessary. The web app is quite involved so I left it out. Long story short, if I watch the console while I move the mouse, the mouse movement doesn't get logged in the console. Clicking will trigger the mousemove event, and the scroll and keyup events do log in the console, but the mousemove does not. I found out by closing the console, moving my mouse around, and then viewing the console. Voila! The mousemove was logged.

I changed my code for easier debugging just during testing.

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

If anyone knows why the console would not log the mousemove while I'm using the developer tools, please let me know.