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
event.pageX;
Esimerkki
Kun hiirtä liikutetaan sivulla, näytämme
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;
});
:
