Svojstvo event.clientX

Svojstvo event.clientX sadrži u sebi koordinate kursora miša po X osi. Za određivanje koordinata tu su i svojstva event.clientY, event.pageX, event.pageY. Pogledajmo razliku između clientX/clientY i pageX/pageY.

Kako rade clientX i clientY: ako imate prozor od 1000 puta 1000 piksela, i miš je u centru, onda će clientX i clientY oba biti jednaki 500. Ako zatim skrolujete stranicu horizontalno ili vertikalno, ne pomerajući kursor, vrednosti clientX i clientY se neće promeniti, jer se računaju u odnosu na prozor, a ne u odnosu na dokument.

Kako rade pageX i pageY: ako imate prozor od 1000 puta 1000 piksela, i kursor je u centru, onda će pageX i pageY biti jednaki 500. Ako zatim skrolujete stranicu za 250 piksela nadole, onda će pageY postati jednak 750. Na taj način pageX i pageY sadrže koordinate dogđaja uzimajući u obzir skrolovanje.

Sintaksa

javascriptevent.clientX;

Primer

Pri pomeranju miša po stranici ispisivaćemo njegove koordinate u odnosu na prozor brauzera (clientX i clientY):

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

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

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

Результат:

Pogledajte takođe