Suivre la position de la souris en JavaScript

Pour suivre le mouvement du pointeur, enregistrez un rappel pour l’événement mousemove du navigateur. Ce rappel reçoit un objet MouseEvent ; lisez ses propriétés de coordonnées dans cet événement au lieu de conserver un état distinct du pointeur. L’événement se déclenche lorsque le pointeur se déplace dans la fenêtre : le gestionnaire peut donc lire sa position à chaque mouvement.

Écouter les mouvements de la souris avec l’événement mousemove

Un écouteur associe un type d’événement à un rappel. Dans l’exemple pour le navigateur ci-dessous, window.addEventListener enregistre handleMouseMove pour mousemove, et le rappel lit pageX, pageY, clientX et clientY. Les noms des propriétés sont sensibles à la casse. L’événement mousemove signale un mouvement ; il ne se déclenche pas simplement au chargement de la page ni lorsque le pointeur reste immobile.

Le petit exemple exécutable montre comment le rappel met en forme les valeurs de l’événement. L’objet simple qu’il utilise sert d’entrée d’exemple pour illustrer les noms des propriétés ; dans une page interactive, utilisez un véritable MouseEvent du navigateur.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

function handleMouseMove(event) {
  console.log(
    `page: (${event.pageX}, ${event.pageY}); client: (${event.clientX}, ${event.clientY})`
  );
}

handleMouseMove({ pageX: 120, pageY: 240, clientX: 120, clientY: 240 });

Pour l’interaction dans le navigateur, utilisez cette page autonome. Son contenu haut rend le document défilable, et le gestionnaire consigne les deux paires de coordonnées chaque fois que le pointeur se déplace sur la page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mouse coordinates</title>
  <style>
    body { min-height: 1600px; font: 16px sans-serif; }
    main { padding: 2rem; }
  </style>
</head>
<body>
  <main>
    <h1>Move the pointer, then scroll</h1>
    <p>Open the browser developer console to compare the coordinate pairs.</p>
  </main>
  <script>
    window.addEventListener('mousemove', (event) => {
      console.log(
        `page: (${event.pageX}, ${event.pageY}); client: (${event.clientX}, ${event.clientY})`
      );
    });
  </script>
</body>
</html>

Choisir entre les coordonnées de la page et celles de la fenêtre d’affichage

pageX et pageY mesurent la position du pointeur depuis le coin supérieur gauche du document. Elles tiennent compte du défilement du document ; elles sont donc utiles quand une position doit rester liée au contenu pendant que le lecteur fait défiler la page. Par exemple, utilisez les coordonnées de la page pour noter l’emplacement d’un point dans un long document.

clientX et clientY mesurent la position depuis le coin supérieur gauche de la fenêtre d’affichage visible. Le défilement ne change pas cette origine. Utilisez ces valeurs pour positionner ou comparer un élément dans la partie actuellement visible du navigateur, par exemple un marqueur de curseur personnalisé ou une superposition dans la fenêtre d’affichage.

Ces paires correspondent à des repères différents ; utilisez donc la même paire dans un calcul. Mélanger une coordonnée de la page et une coordonnée de la fenêtre d’affichage peut décaler le résultat de la distance de défilement. Pour qu’un élément suive le pointeur, il faut aussi gérer d’autres événements de souris et positionner l’élément ; lire les coordonnées ne le déplace pas à lui seul.

Comparer pageX et clientX pendant le défilement

Avant de faire défiler la page, l’origine du document et celle de la fenêtre d’affichage coïncident : les valeurs horizontales pageX et clientX sont donc égales, tout comme pageY et clientY. Déplacez le pointeur et vérifiez les deux paires dans la console. La première vue fournie montre la console avant le défilement.

Après avoir fait défiler la page vers le bas, les valeurs horizontales restent généralement alignées, tandis que la valeur verticale pageY inclut la distance parcourue et que clientY reste mesurée depuis le bord supérieur de la fenêtre d’affichage. L’écart entre les valeurs verticales correspond au décalage de défilement actuel. La deuxième vue fournie montre la console après le défilement.

Choisissez clientX et clientY pour les emplacements relatifs à la partie actuellement visible. Choisissez pageX et pageY pour les emplacements relatifs au document, y compris à son contenu défilé. Pour consulter la liste plus large des événements de souris du navigateur, voir la référence MDN sur les événements de souris.