Vlastnosť event.pageX
Vlastnosť event.pageX obsahuje
súradnice kurzora myši po osi X.
Na určenie súradníc existujú aj vlastnosti
event.clientX,
event.clientY,
event.pageY.
Pozrime sa na rozdiel medzi clientX/clientY
a pageX/pageY.
Ako fungujú clientX a clientY:
ak máte okno 1000 na 1000
pixelov a myš je v strede, potom clientX
a clientY budú obe rovné 500. Ak
potom posuniete stránku horizontálne
alebo vertikálne, bez pohybu kurzora, hodnoty
clientX a clientY sa nezmenia, pretože sa počítajú
vzhľadom na okno, nie na dokument.
Ako fungujú pageX a pageY:
ak máte okno 1000 na 1000
pixelov a kurzor je v strede, potom
pageX a pageY budú rovné 500. Ak
potom posuniete stránku o 250
pixelov nadol, potom pageY sa stane rovným 750.
Takto pageX a pageY obsahujú súradnice
udalosti s prihliadnutím na posúvanie.
Syntax
event.pageX;
Príklad
Pri pohybe myši po stránke budeme vypisovať
jej súradnice vzhľadom na okno prehliadača
(pageX a pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
