Résumé de l'obtention des attributs liés à la position de la souris dans les compétences JavaScript_javascript

Javascript n'a pas d'objet souris. L'obtention des coordonnées de la souris dépend de l'objet événement puissant.

En surveillant le déplacement de la souris sur le document, nous pouvons obtenir la position de la souris en temps réel.

Mais ! ! Il y a trop d'attributs liés à la souris dans l'événement, ce qui est très déroutant ! Comme suit :

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

6 groupes au total !

Et la différence entre eux n’est pas évidente, et les navigateurs ne sont pas compatibles !

Le but de cet article est de clarifier leurs différences et de sélectionner celles qui ne sont pas recommandées.

Code de test

Exécutez directement le code suivant :

Copier le code Le code est le suivant :

http://www.w3.org/1999/xhtml"> />

Afficher les résultats

Div à l'écran

Grand et large. . .

DIV hors écran

<script><br> var jg = document.getElementById('jg');<br> document.onmousemove = fonction (e) {<br> e = e || fenêtre.événement;<br> jg.innerHTML = 'layerX:' e.layerX <br> ',layerY:' e.layerY <br> ', <br/>clientX:' e.clientX <br> ',clientY :' e.clientY <br> ', <br/>pageX:' e.pageX <br> ',pageY :' e.pageY <br> ',<br/>offsetX :' e.offsetX <br> ',offsetY :' e.offsetY <br> ',<br/>screenX:' e.screenX <br> ',screenY :' e.screenY <br> ',<br/>x:' e.x <br> ',y:' e.y;<br> ><br> </script>

Pendant le processus de test, un artefact a été découvert : Chrome (navigateur Google) et IE9 sont entièrement compatibles avec tous les attributs ci-dessus ! C'est très pratique de les comparer.

Après comparaison, les résultats sont les suivants :

Explication de chaque attribut

clientX et Y sont les coordonnées de la souris par rapport à la fenêtre du navigateur (c'est-à-dire que la partie en dehors de la barre de défilement est ignorée) ;

ScreenX et Y sont les coordonnées de la souris par rapport au côté gauche (bord supérieur) de tout l'écran. Elles sont fondamentalement déconnectées du document et sont entièrement compatibles.

offsetX et Y sont les coordonnées de la souris par rapport à l'objet actuellement pointé. Si la souris pointe vers le bouton, offsetX est relatif au bouton ; Firefox ne prend pas en charge

.

x et y sont identiques à layerX et Y dans les navigateurs standards. Ce sont des attributs qui peuvent être utilisés pour remplacer layerX dans IE

.

pageX et Y sont les coordonnées de la souris par rapport au côté gauche (bord supérieur) de la page entière, y compris celles en dehors de la fenêtre d'affichage ; IE7 et 8 ne les prennent pas en charge.

Points clés : layerX et layerY

LayerX et Y sont de nouveaux attributs introduits par les navigateurs standards et sont également pris en charge par IE9. Il peut être utilisé pour remplacer offsetX et Y. Cependant, il est défini comme : les coordonnées de l'élément le plus proche avec des informations de positionnement par rapport à l'élément actuellement pointé. Ce "avec positionnement" signifie qu'il existe des attributs CSS qui ne sont pas positionnés par défaut (c'est-à-dire non statiques).

Si l'élément actuellement pointé est positionné, alors layerX et Y renverront les coordonnées relatives à cet élément ; sinon, vérifiez la balise parent de cet élément ; s'il n'y a toujours pas de positionnement, continuez jusqu'à l'élément racine ; —— nœud html.

Donc, dans Firefox, si vous voulez la valeur offsetX, vous devez ajouter les informations de positionnement !

Résumé de compatibilité :

1. Firefox ne prend pas en charge les attributs offsetX, offsetY et x, y, mais ils peuvent être remplacés par layerX ; 2. x et y dans ie sont équivalents à layerX et layerY dans Firefox
3. Il y a une distance de 2 pixels entre la limite du document d'IE7 et 8 et la limite de la fenêtre du navigateur, donc lorsque la fenêtre est maximisée, le screenX minimum est de 2 pixels
; 4. Bien que layerX et Y dans ie9 aient des valeurs, elles sont inexplicablement incorrectes. Cela semble être lié à la balise html. Par exemple, dans le code de mon exemple, faites glisser la barre de défilement vers l'extrême droite et déplacez lentement la souris. l'espace vide du grand DIV À ce moment, la différence entre la partie la plus à droite du grand DIV et la partie la plus à droite du premier DIV sera également calculée dans layerX. . . Comme il y a de plus en plus d'éléments à la fin, ce calcul devient plus compliqué ; cependant, Firefox et LayerX de Chrome n'ont pas ce problème. Alors, n’utilisez pas layerX dans IE9.
5. Dans Chrome, bien que x et y aient des valeurs, elles sont exactement les mêmes que clientX et Y ! Par conséquent, il n’est pas recommandé d’utiliser les attributs x,y.

Correction de compatibilité

Dans les navigateurs standards, position et event.layerX peuvent être utilisés pour implémenter l'attribut event.offsetX

;

Il n'y a pas de pageX, pageY dans IE7 et 8. Vous pouvez uniquement utiliser document.documentElement.scrollLeft event.clientX pour le trouver.

Ainsi, l'un des x, y ou offsetX, offsetY dans IE peut être supprimé.