Omadus event.clientX
Omadus event.clientX sisaldab
hiirekursori koordinaate X-teljel.
Koordinaatide määramiseks on ka omadused
event.clientY,
event.pageX,
event.pageY.
Vaatame erinevust clientX/clientY
ja pageX/pageY vahel.
Kuidas clientX ja clientY töötavad:
kui teil on aken mõõtmetega 1000 korda 1000
pikslit ja hiir asub keskel, 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 mõõtmetega 1000 korda 1000
pikslit ja kursor asub keskel, siis
pageX ja pageY on võrdsed 500-ga. Kui
te seejärel kerite lehte 250
pikslit alla, siis pageY muutub võrdseks 750-ga.
Seega pageX ja pageY sisaldavad sündmuse koordinaate
kerimist arvesse võttes.
Süntaks
event.clientX;
Näide
Hiire liigutamisel lehel kuvame
selle koordinaadid brauseri akna suhtes
(clientX ja clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
