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.
Once you're in Mouse settings, select Additional mouse options from the links on the right side of the page. In Mouse Properties, on the Pointer Options tab, at the bottom, select Show location of pointer when I press the CTRL key, and then select OK. To see it in action, press CTRL.
The setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using clearInterval() . If you wish to have your function called once after the specified delay, use setTimeout() .
Syntax: const intervalId = setInterval(func, [delay, arg1, agr2, ..., argN]); where, func is the function that we want to execute repeatedly after delay milliseconds.
The setInterval() is a method of the window object. The setInterval() repeatedly calls a function with a fixed delay between each call. In this syntax: The callback is a callback function to be executed every delay milliseconds.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With