Comment utiliser la propriété Mouseevent ScreenX en JavaScript

Comment utiliser la propriété Mouseevent ScreenX en JavaScript

La propriété Mouseevent ScreenX évalue la coordonnée horizontale du curseur de souris (x) au point déclenché. Il renvoie la distance réelle du curseur de la souris correspondant à l'écran comme une valeur entière dans "pixels". De plus, c'est une propriété en lecture seule, je.e., L'utilisateur ne peut obtenir que la coordonnée horizontale de la souris, pas de l'affecter manuellement. La coordonnée horizontale joue un rôle important dans la conception Web pour l'alignement de diverses sections de page Web.

Compte tenu de son importance, cet article fournira un aperçu approfondi de l'utilisation et de la fonctionnalité du «Mouseevent Screenx»Propriété en JavaScript.

Comment utiliser la propriété «Mouseevent ScreenX» en JavaScript?

Le "Mouseevent Screenx»La propriété aide les utilisateurs à obtenir les coordonnées horizontales du pointeur de la souris où cet événement est déclenché.

Syntaxe

événement.screenx

Dans la syntaxe ci-dessus:

  • événement: Il représente tout événement tel que «onclick "," dblclick "," Mouseover", et plein d'autres.
  • screenx: Cela correspond au «Mouseevent Screenx»Propriété qui renverra la coordonnée horizontale de la souris.

Passons à sa mise en œuvre pratique.

Exemple: Application de la propriété «Mouseevent ScreenX» en JavaScript

Dans cet exemple, la propriété discutée peut être utilisée pour calculer les coordonnées horizontales du pointeur de la souris en se référant au paragraphe.

Code HTML

Présentation du code HTML suivant:

Utiliser la propriété Mouseevent ScreenX



Cliquez à tout moment du paragraphe pour afficher les coordonnées x (horizontales) du pointeur de souris dans des pixels.


Dans le code HTML ci-dessus:

  • Le "

    »Crée le premier titre.

  • Le "

    «Représente le premier paragraphe ayant un attaché«sur clic" événement. Il redirige vers la fonction nommée «souris_xcoord ()”Qui renvoie la coordonnée horizontale par rapport à l'emplacement du pointeur de la souris dans le paragraphe.

  • Après cela, le «

    "Dénote le deuxième paragraphe vide attribué un ID"d'abord”Pour afficher la coordonnée du pointeur horizontal calculé.

Code javascript

Maintenant, passons au code JavaScript:

Dans les lignes de code ci-dessus:

  • Définissez une fonction nommée «souris_xcoord ()"Avoir un argument"événement".
  • Dans la définition de la fonction, la variable "un"Est déclaré qui utilise le"screenx" propriété.
  • Le "coordonnées«Est une autre variable qui renvoie la valeur de«un"
  • Le "document.getElementByid ()»La méthode récupère le paragraphe via son identifiant et ajoute les coordonnées calculées dans ce paragraphe.

Sortir

La sortie affiche le «Coords (horizontaux)«Du pointeur de la souris où le«screenx”La propriété déclenche.

Conclusion

JavaScript fournit le «Mouseevent Screenx"Propriété qui renvoie le dernier pointeur de souris"X (horizontal)»Coordonnez où cet événement est déclenché. Il peut être réalisé en oscillant le pointeur horizontalement et les valeurs de coordonnées x correspondantes sont récupérées. Cet article a expliqué l'utilisation et la fonctionnalité du «Mouseevent Screenx»Propriété en JavaScript.