Contenu
La position de la souris
pageX, pageY
mouseevent.pageX et mouseevent.pageY représentent la position de la souris dans la page. La position 0 correspond au coin supérieur gauche de la page web.
Si vous scroller le document vers la droit de 200 pixel, et que la souris pointe à 100 pixel à droite du bord gauche du navigateur, pageX indiquera 300 au lieu de 100, donc ça tient compte du scrolling.
clientX, clientY
mouseevent.clientX et mouseevent.clientY représent la position de la souris par rapport à la fenêtre du navigateur seulement, et donc insensible au scrolling.
Position d’un élément getBoundingClientRect()
Cette méthode renvoit un obhet DOMRect, qui contient les information de position et de taille
element.getBoundingClientRect() #affichage { bottom: 311 // sur axe Y,par rapport au bord haut de la page (origine point de vue) height: 100 // hauteur de l'élément left: 209 // sur axe X right: 309 // sur axe X top: 211 // sur axe Y width: 100 // largeur de l'élément x: 209 y: 211 }
https://developer.mozilla.org/fr/docs/XPCOM_Interface_Reference/nsIDOMClientRect
element.offsetLeft
Renvoit le décalage horizontal en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)
element.offsetTop
Renvoit le décalage vertical en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)