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

javascriptevent.clientX;

Príklad

Pri pohybe myši po stránke budeme vypisovať jej súradnice relatívne k oknu prehliadača (clientX a clientY):

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

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

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

Результат:

Pozrite si aj