Az event.clientX tulajdonság
Az event.clientX tulajdonság
az egérkurzor X tengely koordinátáit tartalmazza.
A koordináták meghatározására további tulajdonságok is léteznek:
event.clientY,
event.pageX,
event.pageY.
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 a 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 mindketten 500 lesznek. Ha
ezután vízszintesen vagy függőlegesen görgetsz,
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ítódnak ki, nem a dokumentumhoz.
Hogyan működik a pageX és a 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 a pageY a görgetéssel együtt
véve tartalmazza az esemény koordinátáit.
Szintaxis
event.clientX;
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;
});
:
