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
event.clientX;
Eksempel
Ved bevegelse av musen over siden vil vi vise
dens koordinater i forhold til nettleservinduet
(clientX og clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
