Ominaisuus event.pageX

Ominaisuus event.pageX sisältää hiiren kohdistimen koordinaatit X-akselilla. Koordinaattien määrittämiseen on myös ominaisuudet event.clientX, event.clientY, 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 vierität sitten sivua vaakasuunnassa tai pystysuunnassa liikuttamatta kohdistinta, arvot clientX ja clientY eivät muutu, koska ne lasketaan ikkunan, ei dokumentin suhteen.

Miten pageX ja pageY toimivat: jos ikkunasi koko on 1000 kertaa 1000 pikseliä, ja kohdin on keskellä, niin pageX ja pageY ovat 500. Jos vierität sitten 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.pageX;

Esimerkki

Kun hiirtä liikutetaan sivulla, näytämme 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