Egenskapen event.clientX

Egenskapen event.clientX inneholder musemarkørens koordinater langs X-aksen. For å bestemme koordinatene finnes det også egenskaper event.clientY, event.pageX, event.pageY. La oss se på forskjellen mellom clientX/clientY og pageX/pageY.

Hvordan clientX og clientY fungerer: hvis du har et vindu på 1000 ganger 1000 piksler, og musen er i sentrum, vil clientX og clientY begge være 500. Hvis du deretter scroller siden horisontalt eller vertikalt, uten å flytte markøren, vil verdiene clientX og clientY ikke endres, fordi de telles i forhold til vinduet, ikke dokumentet.

Hvordan pageX og pageY fungerer: hvis du har et vindu på 1000 ganger 1000 piksler, og markøren er i sentrum, vil pageX og pageY være 500. Hvis du deretter scroller siden 250 piksler ned, vil pageY bli 750. Dermed inneholder pageX og pageY koordinatene for hendelsen med scrolling tatt i betraktning.

Syntaks

javascriptevent.clientX;

Eksempel

Ved bevegelse av musen over siden vil vi vise dens koordinater i forhold til nettleservinduet (clientX og clientY):

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

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

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

Результат:

Se også