cattura la posizione del mouse su setInterval () in Javascript
-
05-07-2019 - |
Domanda
Ho una funzione in javascript che sposta di un div a seconda della posizione del mouse. Questa funzione è impostata su una funzione setInterval () ed eseguita ogni secondo. Devo catturare la posizione del mouse in questo modo:
function mousemov() {
document.getElementById("myDiv").style.left = Event.clientX; //don't work
}
window.onload = function() {
setInterval("mousemov()",1000);
}
Ps: non posso usare l'evento mousemove perché la funzione deve essere eseguita anche se il mouse è fermo.
Grazie per l'aiuto!
Soluzione
L'unica volta in cui è possibile accedere all'oggetto evento è durante l'esecuzione di un gestore eventi. Quindi, ciò che devi fare è creare un evento OnMouseMove sul documento e memorizzare le coordinate del mouse in un oggetto accessibile a livello globale. Puoi quindi accedere a questi valori da qualsiasi altra parte dello script per determinare la posizione del mouse.
Ecco un esempio (non stai usando jQuery, quindi questo è un codice DOM diretto):
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);
}
Dovrei prendere nota che clientX e clientY non tengono conto dello scorrimento. Dovrai recuperare gli offset di scorrimento e applicarli ai valori restituiti.
Altri suggerimenti
bene, se ascolti lo spostamento del mouse per il documento e ne salvi la posizione, allora, quando vuoi, ad es. ogni secondo nel tuo caso hai l'ultima posizione del mouse registrata.
questo è un esempio jquery
$(document).ready(function()
{
$().mousemove(function(e)
{
window.mouseX = e.pageX;
window.mouseY = e.pageY;
});
});
e la tua funzione mousemove sarebbe
function mousemov() {
document.getElementById("myDiv").style.left = window.mouseX;
}