Az event.pageX tulajdonság
Az event.pageX 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.clientX,
event.clientY,
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örget, anélkül hogy mozgatná 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 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 250
pixellel lejjebb görget, akkor a pageY 750 lesz.
Így a pageX és a pageY az esemény koordinátáit
tartalmazza a görgetés figyelembevételével.
Szintaxis
event.pageX;
Példa
Amikor az egér mozog az oldalon, kiírjuk
annak koordinátáit a böngészőablakhoz viszonyítva
(pageX és pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
