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

javascriptevent.pageY;

Esimerkki

Kun hiirtä liikutetaan sivulla, tulostamme sen koordinaatit selainikkunan suhteen (pageX ja pageY):

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

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

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

Результат:

Katso myös