Untuk memprogram beberapa tindakan sebagai respons terhadap pergerakan kursor di jendela browser, terkadang perlu untuk menentukan koordinatnya. Ini dapat dilakukan dengan skrip yang memiliki kemampuan untuk melacak peristiwa yang terjadi di browser. Skrip JavaScript sisi klien memiliki kemampuan ini. Di bawah ini dijelaskan salah satu opsi untuk mendapatkan koordinat kursor menggunakan kemampuan bahasa ini.
instruksi
Langkah 1
Gunakan properti objek acara untuk mendapatkan koordinat kursor saat ini. Objek ini memiliki seluruh rangkaian properti yang relevan untuk menentukan koordinat kursor mouse. Properti LayerX berisi jarak yang diukur dalam piksel dari tepi kiri lapisan saat ini, dan LayerY - jarak yang sama dari tepi atasnya. Kedua properti ini memiliki sinonim - alih-alih event. LayerX, Anda dapat menulis event.x, dan sebagai ganti event. LayerY, Anda dapat menulis event.y. Properti pageX dan pageY menyimpan koordinat horizontal dan vertikal kursor relatif terhadap tepi kiri atas jendela browser, dan properti screenX dan screenY memiliki nilai yang mirip dengan layar monitor.
Langkah 2
Tambahkan pemeriksaan jenis browser ke kode Anda dan gunakan properti clientX dan clientY selain properti di atas pada objek acara. Ini diperlukan karena Microsoft menggunakan penunjukan properti yang berbeda di browser Internet Explorer-nya. Anda dapat menggabungkan kedua pendekatan untuk menentukan koordinat, misalnya, seperti ini:
if (event.pageX || event.pageY) {
koordinatX = event.pageX;
koordinatY = event.pageY;
}
else if (event.clientX || evevnt.clientY) {
koordinatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Langkah 3
Tempatkan kode definisi koordinat dalam fungsi kustom. Sebagai contoh:
fungsi GetMouse (acara) {
var koordinatX = 0, koordinatY = 0;
if (! evevnt) evevnt = window.event;
if (event.pageX || event.pageY) {
koordinatX = event.pageX;
koordinatY = event.pageY;
}
else if (event.clientX || evevnt.clientY) {
koordinatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": koordinatX, "coordY": koordinatY};
}
Fungsi ini mengembalikan larik dua elemen bernama, yang pertama (dengan kunci coordX) berisi koordinat X, dan yang kedua (coordY) berisi koordinat Y.
Langkah 4
Panggil fungsi ini pada beberapa acara - misalnya, pada acara pemindahan mouse (onmousemove) dalam konteks dokumen. Contoh di bawah ini menggunakan fungsi untuk menampilkan koordinat mouse ke bilah status:
document.onmousemove = fungsi (peristiwa) {var CurCoord = GetMouse (peristiwa); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
