Travailler avec la position de la souris ou des éléments en JS

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)

Retour en haut