Az event.pageY tulajdonság
Az event.pageY tulajdonság
az egérkurzor Y tengely koordinátáit tartalmazza.
A koordináták meghatározásához még a következő tulajdonságok állnak rendelkezésre:
event.clientX,
event.clientY,
event.pageX.
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 is 500 lesz. 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,
és nem a dokumentumhoz viszonyítottak.
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 az esemény koordinátáit
tartalmazza a görgetés figyelembevételével.
Szintaxis
event.pageY;
Példa
Amikor az egér mozog a lapon, 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;
});
:
