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

javascriptevent.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):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.pageX + ' : ' + event.pageY;
});

Результат:

Lásd még