Ominaisuus event.pageY
Ominaisuus event.pageY sisältää
hiiren kursorin Y-akselin koordinaatit.
Koordinaattien määrittämiseen on myös ominaisuudet
event.clientX,
event.clientY,
event.pageX.
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 vaaka- tai pystysuunnassa,
liikuttamatta kursoria, arvot
clientX ja clientY eivät muutu, koska ne lasketaan
ikkunan suhteen, eikä dokumentin.
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 ottaen huomioon vierityksen.
Syntaksi
event.pageY;
Esimerkki
Kun hiirtä liikutetaan sivulla, tulostamme
sen koordinaatit selainikkunan suhteen
(pageX ja pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
