capturer la position de la souris sur setInterval () en Javascript

Question

J'ai une fonction en javascript qui déplace une div en fonction de la position de la souris. Cette fonction est définie sur une fonction setInterval () et exécutée toutes les secondes. J'ai besoin de capturer la position de la souris comme ceci:

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

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

Ps: je ne peux pas utiliser l'événement mousemove car la fonction doit être exécutée même si la souris est arrêtée.

Merci pour votre aide!

Answer 1

Le seul moment où vous pouvez accéder à l'objet d'événement est pendant l'exécution d'un gestionnaire d'événements. Vous devez donc créer un événement OnMouseMove sur le document et stocker les coordonnées de la souris dans un objet accessible globalement. Vous pouvez ensuite accéder à ces valeurs depuis n’importe quel autre endroit de votre script pour déterminer la position de la souris.

Voici un exemple (vous n'utilisez pas jQuery, il s'agit donc d'un code DOM simple):

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

Je dois noter que clientX et clientY ne prennent pas en compte le défilement. Vous devrez récupérer les décalages de défilement et les appliquer aux valeurs renvoyées.

Answer 2

Eh bien, si vous écoutez le déplacement de la souris pour le document et enregistrez son emplacement, alors, par exemple, à tout moment, par exemple. chaque seconde, dans votre cas, vous avez la dernière position de souris enregistrée.

ceci est un exemple jquery

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

et votre fonction de déplacement de souris serait

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