最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - MouseMove Event Not Triggering in Chrome - Stack Overflow

programmeradmin0浏览0评论

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

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"));
}
Share Improve this question edited Apr 9, 2021 at 10:34 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 13, 2016 at 13:09 npaynenpayne 1191 silver badge7 bronze badges 7
  • 1 Please post a functional example that illustrates your problem on jsFiddle. – palaѕн Commented Jul 13, 2016 at 13:10
  • This is most probebly there is a missing ) in localStorage.setItem("AI_Timeout_Time", currentTime.getTime() + 270000; Check this JSFIDDLE – brk Commented Jul 13, 2016 at 13:14
  • Yeah, it works with a parenthesis, I tried it too, but scroll and keyup events wouldn't work as well if that was a problem. – Alex M Commented Jul 13, 2016 at 13:19
  • No user2181397, I just dropped the ) when I copied and pasted the code. It is in the live code. – npayne Commented Jul 13, 2016 at 13:19
  • Could it be because I'm using Chrome on a MAC? – npayne Commented Jul 13, 2016 at 13:24
 |  Show 2 more comments

5 Answers 5

Reset to default 6

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

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

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.

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

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.

发布评论

评论列表(0)

  1. 暂无评论