Ominaisuus event.clientY
Ominaisuus event.clientY sisältää
hiiren kursorin Y-akselin koordinaatit.
Koordinaattien määrittämiseen on myös ominaisuudet
event.clientX,
event.pageX,
event.pageY.
Katsotaanpa eroa clientX/clientY
ja pageX/pageY välillä.
Miten clientX ja clientY toimivat:
jos ikkunasi koko on 1000 kertaa 1000
pikseliä, ja hiiri on keskellä, niin clientX
ja clientY ovat molemmat 500. Jos
sitten vierität sivua vaakasuunnassa
tai pystysuunnassa, liikuttamatta kursoria, arvot
clientX ja clientY eivät muutu, koska ne lasketaan
ikkunan suhteen, eivät asiakirjan suhteen.
Miten pageX ja pageY toimivat:
jos ikkunasi koko on 1000 kertaa 1000
pikseliä, ja kursorisi on keskellä, niin
pageX ja pageY ovat 500. Jos
sitten vierität sivua 250
pikseliä alaspäin, niin pageY muuttuu arvoksi 750.
Näin ollen pageX ja pageY sisältävät tapahtuman koordinaatit
vieritys huomioiden.
Syntaksi
event.clientY;
Esimerkki
Kun hiirtä liikutetaan 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;
});
:
