Properti event.clientX
Properti event.clientX berisi
koordinat kursor mouse pada sumbu X.
Untuk menentukan koordinat juga ada properti
event.clientY,
event.pageX,
event.pageY.
Mari kita lihat perbedaan antara clientX/clientY
dan pageX/pageY.
Cara kerja clientX dan clientY:
jika Anda memiliki jendela berukuran 1000 x 1000
piksel, dan mouse berada di tengah, maka clientX
dan clientY keduanya akan sama dengan 500. Jika
Anda kemudian menggulir halaman secara horizontal
atau vertikal, tanpa menggerakkan kursor, maka nilai
clientX dan clientY tidak akan berubah, karena dihitung
relatif terhadap jendela, bukan dokumen.
Cara kerja pageX dan pageY:
jika Anda memiliki jendela berukuran 1000 x 1000
piksel, dan kursor berada di tengah, maka
pageX dan pageY akan sama dengan 500. Jika
Anda kemudian menggulir halaman ke bawah 250
piksel, maka pageY akan menjadi 750.
Dengan demikian pageX dan pageY berisi koordinat
event dengan memperhitungkan pengguliran.
Sintaks
event.clientX;
Contoh
Saat mouse bergerak di halaman, kita akan menampilkan
koordinatnya relatif terhadap jendela browser
(clientX dan clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
