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

<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é

;