Omadus event.pageX

Omadus event.pageX sisaldab hiirekursori koordinaate X-teljel. Koordinaatide määramiseks on ka omadused event.clientX, event.clientY, event.pageY. Vaatame erinevust clientX/clientY ja pageX/pageY vahel.

Kuidas clientX ja clientY töötavad: kui teil on aken 1000 korda 1000 pikslit, ja hiir on keskele asetatud, siis clientX ja clientY on mõlemad võrdsed 500-ga. Kui te seejärel kerite lehte horisontaalselt või vertikaalselt, liigutamata kursorit, siis väärtused clientX ja clientY ei muutu, kuna need loetakse akna suhtes, mitte dokumendi suhtes.

Kuidas pageX ja pageY töötavad: kui teil on aken 1000 korda 1000 pikslit, ja kursor on keskele asetatud, siis pageX ja pageY on võrdsed 500-ga. Kui te seejärel kerite lehte 250 piksli võrra alla, siis pageY muutub võrdseks 750-ga. Seega pageX ja pageY sisaldavad sündmuse koordinaate arvestades kerimist.

Süntaks

javascriptevent.pageX;

Näide

Hiire liigutamisel lehel kuvame selle koordinaadid brauseri akna suhtes (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;
});

Результат:

Vaata ka