capture mouse position on setInterval() in Javascript

Question

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 the mouse position like this:

function mousemov() {
  document.getElementById("myDiv").style.left = Event.clientX; //don't work
}

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

Ps: I cannot use the mousemove event because the function must be executed even if the mouse is stopped.

Thanks for helps!

Answer 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;
}

function mousemov() {
    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.

Answer 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

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