Diverses méthodes pour obtenir la position de la souris en fonction des compétences JavaScript_javascript

Dans certaines opérations DOM, nous traitons souvent de la position des éléments. L'interaction avec la souris est un aspect fréquemment utilisé, c'est que différents navigateurs auront des résultats différents et même certains navigateurs ne le feront pas. quelques résumés simples sur l'obtention des coordonnées de position du clic de la souris. Il n'y a aucune déclaration spéciale selon laquelle le code est testé et compatible sous IE8, FireFox et Chrome
.

Coordonnées de la position du clic de souris

par rapport à l'écran

S'il s'agit d'un clic de souris pour déterminer la position, c'est relativement simple. Après avoir obtenu l'événement de clic de souris, les événements screenX et screenY obtiennent la position du clic par rapport aux marges gauche et supérieure de l'écran. pris en compte. Différents navigateurs Les performances sont assez cohérentes.

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    } 

Par rapport à la fenêtre du navigateur

Un code simple peut être implémenté, mais cela ne suffit pas, car dans la plupart des cas nous souhaitons obtenir les coordonnées de la position du clic de souris par rapport à la fenêtre du navigateur. Les attributs clientX et clientY de l'événement représentent respectivement les coordonnées de l'événement. position du clic de souris par rapport au document. Marge gauche, marge supérieure. De la même manière, nous avons écrit du code comme celui-ci

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    } 

Document relatif

Il n'y a aucun problème avec des tests simples, mais clientX et clientY obtiennent des coordonnées relatives à l'écran actuel, en ignorant les facteurs de défilement de page. Ceci est utile dans de nombreuses conditions, mais lorsque nous devons considérer le défilement de page, c'est-à-dire par rapport à l'écran actuel. document ( Que dois-je faire si les coordonnées de l'élément de corps) sont déterminées ? Ajoutez simplement le déplacement de défilement. Ensuite, nous essayons de calculer le déplacement de défilement de la page.

En fait, le problème sera bien plus simple sous Firefox, car Firefox supporte les attributs pageX et pageY. Ces deux attributs prennent déjà en compte le défilement des pages.

Dans Chrome, vous pouvez calculer le déplacement de défilement de page via document.body.scrollLeft et document.body.scrollTop, tandis que dans IE, vous pouvez calculer le déplacement de défilement de page via document.documentElement.scrollLeft et document.documentElement.scrollTop

function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    } 

Le contenu ci-dessus présente les différentes méthodes d'obtention de la position de la souris basées sur JavaScript introduites par l'éditeur. J'espère qu'il vous plaira.