Méthode d'obtention de la position actuelle de la souris avec JavaScript

Parfois, nous avons besoin de connaître la distance de glissement de la fenêtre ou le déplacement de la souris, dans ce cas, vous pouvez obtenir le résultat souhaité en calculant la position du curseur avant et après dans la page, voici quelques propriétés d'événement :

1、Position des coordonnées de la fenêtre client

　　Les événements souris se produisent toujours à un endroit spécifique dans la fenêtre de visualisation du navigateur. Cette information de position est stockée dans les propriétés clientX et clientY de l'objet événement. Leurs valeurs représentent les coordonnées horizontales et verticales du curseur de la souris dans la fenêtre de visualisation lors de l'événement (sans prendre en compte la distance de défilement de la page). Voici un exemple :

var div = document.getElementById("myDiv"); //Obtenir l'élément
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordonnées d'écran : " + event.screenX + "," + event.screenY);
});

Remarque : dans ce cas, EventUtil.on() signifie lier un événement à un élément, EventUtil.getEvent(event) signifie obtenir l'objet événement. EventUtil est un objet événement personnalisé (implémenté en JavaScript), qui contient quelques méthodes cross-browser. Pour plus de détails, voir un autre article intitulé "Certains méthodes événement cross-browser". Si le projet utilise une extension jQuery, vous pouvez la remplacer par la méthode correspondante.

2、Position des coordonnées de la page

　　Les propriétés de l'objet événement pageX et pageY vous indiquent où l'événement s'est produit dans la page. Autrement dit, ces deux propriétés représentent la position du curseur de la souris dans la page (équivalent aux coordonnées de la souris dans la fenêtre). + La distance de défilement de la page).

var div = document.getElementById("myDiv");//Obtenir l'élément avec l'id "myDiv"
EventUtil.on(div, "click", function(event){//lier l'événement click à l'élément
 event = EventUtil.getEvent(event);//Obtenir l'objet d'événement event
 var pageX = event.pageX,pageY = event.pageY;
 if (pageX === undefined){//IE8et versions antérieures
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Coordonnées de la page : " + pageX + "," + pageY);
});

3emplacement des coordonnées d'écran

　　Les coordonnées X et Y de l'écran peuvent déterminer les coordonnées du curseur par rapport à l'écran entier lors de l'événement de souris. Voici un exemple :

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordonnées d'écran : " + event.screenX + "," + event.screenY);
});

L'article est inspiré de "Conception avancée des programmes JavaScript, troisième édition"

Merci de votre lecture, j'espère que cela vous aidera, merci de votre soutien à ce site !