Comment puis-je suivre la position de la souris en Javascript à l'aide d'événements et de minuteries ?

Suivi de la position de la souris en Javascript

En Javascript, le suivi de la position de la souris nécessite périodiquement de s'abonner à l'événement mousemove.

Utilisation de l'événement Mousemove

La méthode la plus courante consiste à utiliser le gestionnaire d'événements mousemove. Voici un extrait de code :

document.addEventListener('mousemove', (event) => {
  // Event details...
});

Dans le gestionnaire d'événements, vous pouvez accéder aux coordonnées X et Y de la souris via event.clientX et event.clientY.

Une note sur les bulles d'événement

Notez que l'événement mousemove fait des bulles. Cela signifie que si vous attachez un gestionnaire d'événements à l'objet document (comme vu ci-dessus), vous recevrez des événements même lorsque la souris se trouve en dehors des éléments visibles. Vous pouvez choisir d'attacher des gestionnaires d'événements à des éléments spécifiques à la place, si vous le souhaitez.

Utilisation d'une approche basée sur une minuterie

Pour une approche basée sur une minuterie, vous pouvez combiner le gestionnaire mousemove avec des variables d'état et setIntervalle. Cela garantit que vous récupérez périodiquement la position de la souris, quel que soit le mouvement de la souris.

let mousePos;

document.addEventListener('mousemove', (event) => {
  mousePos = {
    x: event.clientX,
    y: event.clientY
  };
});

setInterval(() => {
  // Use mousePos.x and mousePos.y
}, 100); // 100ms interval

Limitations et considérations

Notez que la récupération de la position de la souris uniquement via des minuteries n'est généralement pas fiable. Vous devez d'abord disposer d'un déclencheur d'événement avant d'obtenir des données précises. De plus, des interrogations excessives peuvent nuire aux performances du navigateur, en particulier dans les anciennes versions. Gardez votre code de traitement minimal dans ces gestionnaires d'événements.

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!