Az event.clientY tulajdonság
Az event.clientY tulajdonság tartalmazza
az egérkurzor Y tengely koordinátáit.
A koordináták meghatározására szolgálnak még a
event.clientX,
event.pageX,
event.pageY
tulajdonságok is.
Nézzük meg a különbséget a clientX/clientY
és a pageX/pageY
között.
Hogyan működik a clientX és clientY:
ha van egy 1000 x 1000
pixel méretű ablak, és az egér középen van, akkor a clientX
és a clientY mindkettő 500 lesz. Ha
ezután görgetsz vízszintesen vagy függőlegesen
anélkül, hogy mozgatnád a kurzort, akkor a
clientX és clientY értékei nem változnak, mivel ezek
az ablakhoz viszonyítva számítanak, nem a dokumentumhoz.
Hogyan működik a pageX és pageY:
ha van egy 1000 x 1000
pixel méretű ablak, és a kurzor középen van, akkor
a pageX és a pageY 500 lesz. Ha
ezután lefelé görgetsz 250
pixelt, akkor a pageY 750 lesz.
Így a pageX és pageY a görgetéssel együtt
veszi figyelembe az esemény koordinátáit.
Szintaxis
event.clientY;
Példa
Amikor az egér mozog az oldalon, kiírjuk
annak koordinátáit a böngészőablakhoz viszonyítva
(clientX és clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
