Propriété event.clientY
La propriété event.clientY 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.pageX,
event.pageY.
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 ensuite 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 tenant compte du défilement.
Syntaxe
event.clientY;
Exemple
Lors du déplacement de la souris sur la page, nous afficherons
ses coordonnées relatives à la fenêtre du navigateur
(clientX et clientY) :
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
