Vlastnosť event.clientX
Vlastnosť event.clientX obsahuje
súradnice kurzora myši po osi X.
Na určenie súradníc existujú aj vlastnosti
event.clientY,
event.pageX,
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, pageY sa stane rovným 750.
Takto pageX a pageY obsahujú súradnice
udalosti s prihliadnutím na posun.
Syntax
event.clientX;
Príklad
Pri pohybe myši po stránke budeme vypisovať
jej súradnice relatívne k oknu prehliadača
(clientX a clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
