JavaScript n'a pas d'objet de souris, et cela dépend d'un objet d'événement puissant pour obtenir des coordonnées de souris.
En écoutant le Mousemove du 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 excitant! comme suit:
| event.layerx | event.layery |
| event.clientx | événement. |
| event.pagex | event.pagey |
| event.offsetx | event.offsety |
| event.screenx | event.screeny |
| event.x | événement.y |
Un total de 6 groupes!
De plus, leurs différences ne sont pas évidentes et les navigateurs ne sont pas compatibles!
Le but de cet article est de clarifier leurs différences et de sélectionner ceux qui ne sont pas recommandés.
Code de test
Exécutez directement le code suivant:
La copie de code est la suivante:
<! Doctype html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br />
<A-tête> <br />
<meta charset = "utf-8" /> </p>
<style>
corps {position: relatif;}
div {min-height: 300px; Color en arrière-plan: #eee;}
#jg {droit: 0; En haut: 10px; Position: fixe; Color en arrière-plan: # f00;}
</ style>
<p> </ head> <br />
<body> <br />
<span id = "jg"> Afficher les résultats </span> <br />
<entrée type = "bouton" value = "un bouton" /> </p>
<div> div à l'écran </div>
<div style = "hauteur: 1000px; largeur: 2000px; arrière-plan: #ddd;"> très haut et large. . . </div>
<div> Div hors écran </div>
<p> </ body> <br />
<cript>
var jg = document.getElementById ('jg');
document.onmousemove = fonction (e) {
E = E || window.event;
jg.innerhtml = 'couchex:' + e.layerx +
', Layery:' + E.Layery +
', <br/> clientx:' + e.clientx +
', Clienty:' + e.clienty +
', <br/> pagex:' + e.pagex +
', Pagey:' + e.pagey +
', <br/> offsetx:' + e.offsetx +
, offsety: '+ e.offsety +
', <br/> ScreenX:' + E.Screenx +
', Screeny:' + E.Screeny +
', <br/> x:' + e.x +
', y:' + ey;
}
</cript> <br />
</html>
Pendant le test, j'ai trouvé un outil magique: Chrome (Google Chrome) et IE9 sont compatibles avec tous les attributs ci-dessus! Il est très pratique de les comparer.
Après la comparaison, les résultats sont les suivants:
Définition 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 pièce à l'extérieur de la barre de défilement est ignorée); Tous les navigateurs le soutiennent.
ScreenX et Y sont les coordonnées de la souris par rapport à la gauche (bord supérieur) de l'écran entier, qui est fondamentalement hors de contact avec le document; il est entièrement compatible.
Offsetx et Y sont les coordonnées de la souris par rapport à l'objet actuellement pointé. Lorsque la souris pointe vers le bouton à ce moment, Offsetx est relatif à ce bouton; Firefox ne prend pas en charge
X et Y, couchex et y dans le même navigateur standard, sont des attributs qui peuvent être utilisés pour remplacer la couchex dans IE.
Pagex et Y sont les coordonnées de la souris par rapport à la gauche (bord supérieur) de toute la page, y compris en dehors de la fenêtre; IE7 et 8 ne le soutiennent pas.
Points clés: Layerx et Layery
Layerx et Y sont de nouveaux attributs publiés par les navigateurs standard, et IE9 les prend également en charge. Il peut être utilisé à la place de Offsetx et Y. Cependant, sa définition est: les coordonnées de l'élément avec des informations de positionnement par rapport à l'élément de pointage actuel. Ce "positionné" fait référence à un attribut CSS (c'est-à-dire non statique) qui a un positionnement sans défaut.
Si l'élément actuel est positionné, Layerx et Y renvoient les coordonnées relatives à cet élément; Sinon, vérifiez l'étiquette parent de cet élément; S'il n'y a toujours pas de positionnement, continuez; Jusqu'à l'élément racine - nœud html.
Par conséquent, dans Firefox, si vous souhaitez offSetx la valeur, vous devez ajouter des informations de position de position!
Résumé de la compatibilité:
1. Firefox ne prend pas en charge Offsetx, Offsey et X, Y attributs, mais ils peuvent être remplacés par LayerX;
2. X et Y dans IE sont équivalents à la couchex et auyery dans Firefox & Chrome;
3. La limite du document de IE7 et 8 est à 2px de la limite de la fenêtre du navigateur, donc ScreenX a une distance minimale de 2px lorsque la fenêtre est maximisée;
4. Bien que la couchex et Y dans IE9 aient des valeurs, elles sont inexplicablement incorrectes. Ils semblent être liés à la balise HTML. Par exemple, dans mon exemple de code, faites glisser la barre de défilement vers le plus à droite et la souris se déplace lentement du blanc vers la grande div. À l'heure actuelle, la différence entre le plus à droite et le plus à droite de la première div sera également incluse dans couchex. . . Comme il y a de plus en plus d'éléments à la fin, plus le calcul est compliqué; tandis que la couche de Firefox et Chrome n'a pas ce problème. Alors, n'utilisez pas LayerX dans IE9.
5. Dans Chrome, bien que X et Y aient des valeurs, ils sont exactement les mêmes que ClientX et Y! Par conséquent, il n'est pas recommandé d'utiliser les attributs x, y.
Remède de compatibilité
Dans les navigateurs standard, la position et l'événement.Layerx peuvent être utilisés pour implémenter l'attribut event.offsetx;
Il n'y a pas de pagex ou de pagey dans IE7. Vous pouvez uniquement utiliser Document.DocumentElement.Scrollleft + Event.Clientx pour le trouver.
Par conséquent, l'un des x, y ou offsetx et offsety dans IE peut être supprimé.