Event.clientX īpašība
Īpašība event.clientX satur
peles kursora X ass koordinātes.
Koordinātu noteikšanai ir arī īpašības
event.clientY,
event.pageX,
event.pageY.
Apskatīsim atšķirību starp clientX/clientY
un pageX/pageY.
Kā strādā clientX un clientY:
ja jums ir logs 1000 uz 1000
pikseļiem, un pele atrodas centrā, tad clientX
un clientY abi būs vienādi ar 500. Ja
jūs pēc tam ritināsiet lapu horizontāli
vai vertikāli, nepārvietojot kursoru, tad vērtības
clientX un clientY nemainīsies, jo tie tiek skaitīti
attiecībā pret logu, nevis dokumentu.
Kā strādā pageX un pageY:
ja jums ir logs 1000 uz 1000
pikseļiem, un kursors atrodas centrā, tad
pageX un pageY būs vienādi ar 500. Ja
jūs pēc tam ritināsiet lapu uz leju par 250
pikseļiem, tad pageY kļūs vienāds ar 750.
Tādējādi pageX un pageY satur notikuma koordinātas
ņemot vērā ritināšanu.
Sintakse
event.clientX;
Piemērs
Pārvietojot peli pa lapu, mēs parādīsim
tās koordinātas attiecībā pret pārlūkprogrammas logu
(clientX un clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
