Skip to content
Advertisement

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

Answer

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.

Advertisement