Proprietà event.clientY
La proprietà event.clientY contiene le
coordinate del cursore del mouse sull'asse Y.
Per determinare le coordinate ci sono anche le proprietà
event.clientX,
event.pageX,
event.pageY.
Diamo un'occhiata alla differenza tra clientX/clientY
e pageX/pageY.
Come funzionano clientX e clientY:
se hai una finestra di 1000 per 1000
pixel, e il mouse si trova al centro, allora clientX
e clientY saranno entrambi uguali a 500. Se
poi scorri la pagina orizzontalmente
o verticalmente, senza muovere il cursore, i valori
di clientX e clientY non cambieranno, poiché sono calcolati
relativamente alla finestra, non al documento.
Come funzionano pageX e pageY:
se hai una finestra di 1000 per 1000
pixel, e il cursore si trova al centro, allora
pageX e pageY saranno uguali a 500. Se
poi scorri la pagina di 250
pixel verso il basso, allora pageY diventerà uguale a 750.
Pertanto pageX e pageY contengono le coordinate
dell'evento tenendo conto dello scorrimento.
Sintassi
event.clientY;
Esempio
Durante lo spostamento del mouse sulla pagina, visualizzeremo
le sue coordinate relative alla finestra del browser
(clientX e clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
