Capture Mouse Position On Setinterval() In Javascript

I have a function in javascript that moves one div depending on the mouse position. This function is set on a setInterval() function and executed every second. I need to capture th

Solution 1:

The only time that you can access the event object is during the execution of an event handler. So what you need to do is create an OnMouseMove event on the document and store the mouse coordinates in a globally accessible object. You can then access these values from anywhere else in your script to determine the mouse position.

Here is an example (you're not using jQuery, so this is straight DOM code):

document.onmousemove = function(e) {
    var event = e || window.event;
    window.mouseX = event.clientX;
    window.mouseY = event.clientY;
}

functionmousemov() {
    document.getElementById("myDiv").style.left = window.mouseX;
}

window.onload = function() {
    setInterval(mousemov, 1000);
}

I should make the note that clientX and clientY don't take scrolling into account. You'll need to retrieve the scrolling offsets and apply them to the returned values.

Solution 2:

well, if you listen to mouse move for the document and save its location, then, whenever you want, e.g. every second in your case you have the latest registered mouse position.

this is a jquery example

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
       window.mouseX = e.pageX;
       window.mouseY = e.pageY;
  });
});

and your mousemove function would be

functionmousemov() { 
    document.getElementById("myDiv").style.left = window.mouseX;
}