Ominaisuus event.clientX
Ominaisuus event.clientX sisältää
hiiren kursorin X-akselin koordinaatit.
Koordinaattien määrittämiseen on myös ominaisuudet
event.clientY,
event.pageX,
event.pageY.
Katsotaanpa eroa clientX/clientY
ja pageX/pageY välillä.
Miten clientX ja clientY toimivat:
jos ikkunasi koko on 1000 x 1000
pikseliä, ja hiiri on keskellä, niin clientX
ja clientY ovat molemmat 500. Jos
sitten skrollaat sivua horisontaalisesti
tai vertikaalisesti liikuttamatta kursoria, arvot
clientX ja clientY eivät muutu, koska ne lasketaan
ikkunan suhteen, eivät dokumentin.
Miten pageX ja pageY toimivat:
jos ikkunasi koko on 1000 x 1000
pikseliä, ja kursorisi on keskellä, niin
pageX ja pageY ovat 500. Jos
sitten skrollaat sivua 250
pikseliä alaspäin, niin pageY muuttuu arvoksi 750.
Näin ollen pageX ja pageY sisältävät tapahtuman koordinaatit
skrollauksen huomioiden.
Syntaksi
event.clientX;
Esimerkki
Kun hiiri liikkuu sivulla, tulostamme
sen koordinaatit suhteessa selainikkunaan
(clientX ja clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
