Comment obtenir des coordonnées de souris en javascript
Cet article discutera des méthodes pour obtenir des coordonnées de souris en JavaScript.
Comment obtenir des coordonnées de souris en javascript?
Pour obtenir des coordonnées de souris en JavaScript, le «clientx" et "clientèle»Les propriétés peuvent être utilisées avec:
- "sur clic" événement
- "pagex" et "piste«Propriétés avec«addEventListener ()" méthode
- "onmousemove«Événement et«getElementByid ()" méthode
Nous allons maintenant passer par chacune des méthodologies énumérées une par une!
Méthode 1: Obtenez des coordonnées de souris en JavaScript à l'aide de l'événement OnClick
Le "clientx" et "clientèle«Les propriétés sont utilisées pour retourner les coordonnées horizontales et verticales du pointeur de souris, respectivement. Alors qu'un «sur clic»L'événement est déclenché lorsque l'utilisateur clique sur un élément. Ces méthodes peuvent être implémentées pour accéder aux coordonnées horizontales et verticales de souris en localisant la dernière position du pointeur à l'aide d'un bouton spécifié.
Syntaxe
objet.onClick = MousEcoORDINATS () MyScript;Dans la syntaxe ci-dessus, "Mousecoordontes ()»Fait référence à la fonction qui sera invoquée lorsqu'un bouton est cliqué.
Exemple
Tout d'abord, créez un bouton avec un événement OnClick redirigeant vers la fonction MouseCoOrdiate () lorsqu'il est déclenché:
Ensuite, définissez une fonction nommée «Mousecoordontes ()"Ce qui prend l'événement comme argument. Lorsque les événements spécifiés sont déclenchés, le «clientx" et "clientèle»Propriétés Renvoie les valeurs de coordonnées x et y mises à jour de la souris:
Fonction MousecoORDINATS (événement)document.écrire ("coordonner (x) =" + événement.clientx + "
Coordonner (y) = "+ événement.Clienty);
La mise en œuvre ci-dessus résulte la sortie suivante:
En cas d'obtention des coordonnées de la souris de l'ensemble DOM lors du défilement, utilisez la méthode ci-dessous.
Méthode 2: Obtenez des coordonnées de souris en JavaScript à l'aide de propriétés Pagex et Pagey avec AddEventListener ()
Le "pagex" et "piste«Les propriétés renvoient respectivement les coordonnées horizontales et verticales, en se référant au«Document Object Model (DOM)«Sur le plan de la souris et le« «addEventListener ()»Méthode qui joint un gestionnaire d'événements à un document. Ces méthodes peuvent être appliquées pour obtenir les valeurs de coordonnées de l'écran visible et l'ensemble du DOM lors du défilement.
Syntaxe
document.AdveventListener (MouseMove, Mousecoordinate)Dans la syntaxe ci-dessus, "Cliquez sur»Fait référence à l'événement spécifié et«mutilation«Est la fonction sur laquelle l'événement doit être appliqué.
Exemple
Tout d'abord, ajustez la hauteur du DOM global dans la page Web afin d'obtenir la valeur de coordonnée "piste"En le faisant défiler:
Ensuite, définissez une fonction nommée «Mousecoordontes ()"Cela accepte la variable"événement«Comme argument comme discuté dans la méthode précédente. Cette variable particulière sera utilisée pour accéder à la valeur des propriétés Pagex, Pagey, ClientX et Clienty pour obtenir les valeurs de coordonnées de la page Web complète et de l'écran visible lors du défilement:
Fonction MousecoORDINATS (événement)console.journal ("pagex:", événement.pagex,
"Pagey:", événement.piste,
"Clientx:", événement.clientx,
"Clienty:", événement.clientèle)
Enfin, ajoutez un événement nommé "mousemove" et le "mutilation«Comme la fonction qui sera invoquée pour obtenir les coordonnées pendant que le pointeur se déplace:
fenêtre.AddeventListener («MouseMove», Mousecoordontes);Sortir
Dans la sortie ci-dessus, on peut observer qu'en faisant défiler vers le bas, la valeur de «piste"Augmente avec l'augmentation du"axe y”Du DOM.
Méthode 3: Obtenez des coordonnées de souris en JavaScript à l'aide de l'événement OnMouSemove et de la méthode GetElementBById ()
Le "onmousemove”L'événement est déclenché lorsque le pointeur se déplace sur un élément spécifique et le"getElementByid ()»La méthode récupère un élément avec un ID spécifié. Ces méthodes peuvent être appliquées pour afficher les valeurs de coordonnées fluctuantes sur le plan de souris sur DOM.
Syntaxe
document.GetElementByid (EleMedId)Ici, "élémentID»Fait référence à l'ID spécifié de l'élément ajouté.
Exemple
Tout d'abord, attribuez un identifiant nommé "sortir«À paragraphe. Ensuite, appliquez le «fléau”Événement au document global et attribuez-le la fonction MousecoORDINATS () qui sera invoquée en conséquence:
document.onMouseMove = mousécoordinates;
Dans l'étape suivante, récupérez l'élément de paragraphe créé en spécifiant son identifiant dans le document.Méthode GetElementById ():
Sortie var = document.getElementById («sortie»);Ici, définissez une fonction nommée «Mousecoordontes ()"Prendre l'événement comme un argument comme discuté dans les méthodes précédentes. Dans sa définition de fonction, utilisez le «clientx" et "clientèle«Propriétés avec l'événement pour obtenir le«X" et "Y»Les coordonnées de la souris en déplaçant le curseur.
Enfin, affichez les coordonnées correspondantes sur le DOM en ce qui concerne la position du curseur en tant qu'innerhtml du paragraphe récupéré nommé comme «sortir»:
Fonction MousecoORDINATS (événement)var xpos = événement.clientx;
var ypos = événement.clientèle;
sortir.innerhtml = "coordonnées (x):" + xpos + "" + "pixels
Coordonnée (y): "+ ypos +" "+" pixels ";
Sortir
Cet article a compilé les méthodes pour obtenir des coordonnées de souris en javascript.
Conclusion
Pour obtenir des coordonnées de souris en JavaScript, appliquez le «clientx" et "clientèle”Propriétés avec l'événement OnClick pour obtenir les dernières coordonnées de souris sur le bouton cliquer, le"pagex" et "piste«Propriétés et«addEventListener ()«Méthode pour obtenir les coordonnées du DOM global et de l'écran actuel ou avec un«onmousemove«Événement et«getElementByid ()”Méthode pour afficher les coordonnées changeantes lors du plan de la souris. Ce blog a démontré les méthodes pour obtenir des coordonnées de souris en javascript.