Comment puis-je suivre la position de la souris en JavaScript ?

Comment suivre la position de la souris en JavaScript

Le suivi de la position de la souris implique de recevoir des événements, tels que mousemove, qui signalent les coordonnées du curseur de la souris. En gérant ces événements, nous pouvons périodiquement récupérer et afficher la position actuelle.

La solution suivante exploite l'événement mousemove attaché à la fenêtre :

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  var posX = event.pageX;
  var posY = event.pageY;

  console.log(`Current Position: ${posX}, ${posY}`);
}

Explication :

1. L'écouteur d'événement onmousemove est affecté à l'objet document, ce qui l'amène à écouter les mouvements de la souris tout au long du processus. page Web.
2. Lorsqu'un événement mousemove se produit, la fonction handleMouseMove est exécutée.
3. Dans la fonction, l'objet événement est utilisé pour récupérer la position de la souris à l'aide de event.pageX et event.pageY.
4. Les coordonnées obtenues sont ensuite enregistrées dans la console, que vous pouvez visualiser à l'aide du JavaScript du navigateur. console.

Solution alternative avec minuterie :

Si vous avez besoin d'une solution qui met périodiquement à jour la position de la souris, vous pouvez combiner le code ci-dessus avec une fonction de minuterie :

var mousePos;

document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // Update every 100ms

function handleMouseMove(event) {
  mousePos = {
    x: event.pageX,
    y: event.pageY,
  };
}

function getMousePosition() {
  if (!mousePos) {
    // Handle case where mouse position has not been set yet
  } else {
    // Use the stored mousePos.x and mousePos.y values
  }
}

Remarque : Il est crucial de maintenir au minimum le traitement au sein du gestionnaire d'événements ou de la fonction de minuterie. pour éviter de surcharger le navigateur. Pensez à optimiser votre code en vérifiant si la position a changé avant d'effectuer des calculs ou des mises à jour complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!