Suivre la position de la souris en JavaScript
- Diverses manières de suivre les événements de la souris en JavaScript
-
Suivi de la position de la souris à l’aide de
PageX,PageYetclientX,clientYen JavaScript
Pour suivre le mouvement de la souris en JavaScript, nous utilisons un écouteur d’événement. Un écouteur d’événement est quelque chose qui continue à écouter les changements qui se produisent. Par exemple, un événement mousedown n’est déclenché que lorsqu’un utilisateur clique sur le bouton de la souris.
Il existe divers événements de souris disponibles en JavaScript, parmi lesquels nous nous concentrerons sur l’événement mousemove car nous voulons suivre la position de la souris. Pour voir une liste complète des événements de souris, vous pouvez visiter les Documents MDN sur les événements de souris.
Diverses manières de suivre les événements de la souris en JavaScript
Pour suivre la position de la souris, nous devons trouver son axe x (position horizontale) et son axe y (position verticale) à l’intérieur de l’onglet du navigateur. Vous savez peut-être que le coin supérieur gauche du navigateur est représenté par (0,0). Si vous déplacez la souris horizontalement, sa position x changera, et si vous déplacez la souris verticalement, sa position y changera.
Il existe deux manières différentes d’obtenir ces positions x et y de la souris dans l’onglet du navigateur, et ces manières sont les suivantes.
- Si vous souhaitez suivre les positions de la souris par rapport à la taille de la page Web, utilisez
pageXetpageY. - Si vous souhaitez suivre la position de la souris en fonction de la zone visible de l’écran, utilisez
clientXetclientY.
Suivi de la position de la souris à l’aide de PageX, PageY et clientX, clientY en JavaScript
Comprenons ces deux manières avec l’exemple ci-dessous.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;">Div with height 1000px...</div>
<script src="./script.js"></script>
</body>
</html>
Ici, nous avons un document HTML. À l’intérieur de la balise body, nous avons un élément div avec du texte et une height de 1000px. Il y a une raison pour laquelle nous avons donné autant de hauteur à cet élément div. En fournissant autant de hauteur au div, nous obtiendrons une barre de défilement à l’intérieur de la page Web, ce qui est nécessaire pour illustrer les deux manières ci-dessus de suivre le mouvement de la souris.
Ensuite, nous avons une balise de script qui relie le script ci-dessous au document HTML.
function mousemove(event) {
console.log(
'pageX: ', event.pageX, 'pageY: ', event.pageY,
'clientX: ', event.clientX, 'clientY:', event.clientY)
}
window.addEventListener('mousemove', mousemove);
Nous avons ajouté un événement mousemove à l’objet fenêtre en utilisant la fonction addEventListener dans le fichier de script. Cette fonction prend deux paramètres, le premier paramètre est l’événement que nous voulons ajouter. Le deuxième paramètre est une fonction qui sera exécutée après le déclenchement de l’événement.
Dans ce cas, nous avons créé la fonction mousemove() et l’avons passée en tant que rappel à l’écouteur d’événement. Cette fonction prend événement comme argument. Cette variable événement fournira les positions x et y mises à jour de la souris. Vous pouvez donner n’importe quel nom à la fonction mousemove(), mais vous devez transmettre le nom exact de l’événement à l’écouteur d’événement ; sinon, cela ne fonctionnera pas.
A l’intérieur de la fonction mousemove(), nous avons juste console.log() les valeurs de la souris en utilisant event.pageX, event.pageY et event.clientX, event.clientY. La capture d’écran ci-dessous illustre la sortie du code ci-dessus.
En voyant la sortie dans la console, vous ne verrez aucune différence car pageX, et clientX affichent les mêmes valeurs, et pageY et clientY affichent les mêmes valeurs. Nous n’avons pas encore fait défiler la page, nous obtenons donc les mêmes valeurs.
Si vous faites défiler la page puis vérifiez les valeurs, il y aura une différence dans les valeurs. La capture d’écran ci-dessous illustre cela.
Après défilement de la page, les valeurs fournies par les événements pageX et pageY sont plus grandes que celles fournies par les événements clientX et clientY. En effet, pageX et pageY calculent les valeurs x et y depuis le début de la page Web, tandis que clientX et clientY calculent les valeurs en fonction de la partie visible de l’écran.
Plus tard, vous pouvez également prendre ces positions de souris et les appliquer à l’élément HTML (en mettant à jour les valeurs gauche et supérieure de l’élément) de sorte que partout où le curseur de la souris se déplace, l’élément le suive également. Pour y parvenir, vous devez également utiliser d’autres événements de souris.
Maintenant, vous pourriez avoir une question sur l’un de ces événements de souris à utiliser dans la pratique, et la réponse à cette question dépend du cas d’utilisation. Si vous souhaitez suivre la position de la souris uniquement dans la zone visible de l’écran, utilisez clientX et clientY. Sinon, vous pouvez utiliser les événements de souris pageX et pageY pour calculer la position de la souris à partir du début de la page Web.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn