Propriété event.pageY
La propriété event.pageY contient les
coordonnées du curseur de la souris sur l'axe Y.
Pour déterminer les coordonnées, il existe également les propriétés
event.clientX,
event.clientY,
event.pageX.
Voyons la différence entre clientX/clientY
et pageX/pageY.
Comment fonctionnent clientX et clientY :
si vous avez une fenêtre de 1000 sur 1000
pixels, et que la souris se trouve au centre, alors clientX
et clientY seront tous deux égaux à 500. Si
vous faites défiler la page horizontalement
ou verticalement, sans déplacer le curseur, les valeurs
de clientX et clientY ne changeront pas, car elles sont calculées
par rapport à la fenêtre, et non au document.
Comment fonctionnent pageX et pageY :
si vous avez une fenêtre de 1000 sur 1000
pixels, et que le curseur se trouve au centre, alors
pageX et pageY seront égaux à 500. Si
vous faites ensuite défiler la page de 250
pixels vers le bas, alors pageY deviendra égal à 750.
Ainsi, pageX et pageY contiennent les coordonnées
de l'événement en prenant en compte le défilement.
Syntaxe
event.pageY;
Exemple
Lors du déplacement de la souris sur la page, nous afficherons
ses coordonnées relatives à la fenêtre du navigateur
(pageX et pageY) :
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
