Comment suivre la position de la souris en javascript

Le suivi d'une position de souris est une tâche intéressante qui suit les coordonnées du pointeur. Il extrait les coordonnées X et Y de toute la page Web ou de la zone spécifiée définie par l'utilisateur. JavaScript fournit «Clientx» et «Client» Propriétés pour suivre le pointeur de la souris dans la fenêtre actuelle. Ces propriétés découvrent où se situe la souris de l'utilisateur dans les coordonnées X et Y de la fenêtre du navigateur. Dans cet article, nous montrerons la voie à suivre une position de souris.

Comment suivre la position de la souris en javascript?

En javascript, deux propriétés, «Clientx» et «Client», sont utilisés pour suivre une position de souris dans la zone visible du navigateur. Les deux propriétés sont exécutées dans une zone spécifiée fournie par l'utilisateur.

La syntaxe du «clientx" et "clientèle»Les propriétés sont fournies ci-dessous:

Syntaxe de ClientX

événement.clientx

Le "clientx»Renvoie l'axe horizontal du pointeur de la souris.

Syntaxe de la clientèle

événement.clientx

De même, le «Client» la propriété renvoie l'axe vertical avec le mouvement du pointeur de la souris.

Exemple

L'exemple explique l'utilisation du suivi de la position de la souris dans JavaScript.

Code HTML

Exemple pour suivre la position de la souris en javascript

Position X de la souris: .

Position de souris y: .

L'explication du code est la suivante:

• Premièrement, le div La balise est créée et un «div1»ID lui est affecté.
• Différentes propriétés, y compris hauteur, largeur, frontière, et position, sont appliqués à l'intérieur étiqueter.
• Après cela, le getCursorPosition () la méthode est utilisée en passant un "événement".
• Après cela, le «Position X de la souris» et «Position Y de la souris» sont extraits avec le mouvement du curseur.
• En fin de compte, le chemin source du fichier JavaScript est attribué "test.JS " dans étiqueter.

Le code pour le «test.js»Le fichier est fourni ci-dessous:

Code javascript

fonction getCursorPosition (événement)
document.getElementByid ("c_p_x").textContent = événement.clientx;
document.getElementByid ("c_p_y").textContent = événement.clientèle;

Dans ce code:

• Premièrement, le getCursorPosition () La méthode est appelée et un argument est passé nommé "événement".
• Après cela, le document.getElementbyid est utilisé pour extraire les éléments HTML dont les ID sont "C_P_X" et "C_P_Y".
• Le événement.clientx Renvoie les coordonnées horizontales en fonction de la zone client et du "événement.clientèle » est employé en renvoyant les coordonnées verticales dans le navigateur.

Sortir

La sortie montre que «Position X de la souris» et «Position Y de la souris» sont suivis en modifiant la position de la souris dans le navigateur.

Conclusion

En javascript, le «Clientx» et «Client» propriétés suivent la position de la souris. Ces propriétés peuvent être combinées avec une fonction définie par l'utilisateur pour obtenir les coordonnées de la position de la souris. Ce message a démontré la méthode pour suivre la position de la souris dans JavaScript en utilisant le "clientx" et "clientèle" propriétés. L'exemple pratiqué ici montre que le x-coordonné et y coordonner en y sont mis à jour dynamiquement chaque fois qu'une souris se déplace.