Untuk memprogram beberapa tindakan sebagai tindak balas terhadap pergerakan kursor di tetingkap penyemak imbas, kadang-kadang perlu menentukan koordinatnya. Ini dapat dilakukan oleh skrip yang memiliki kemampuan untuk mengesan peristiwa yang berlaku di penyemak imbas. Skrip JavaScript sisi pelanggan mempunyai kemampuan ini. Di bawah ini dijelaskan salah satu pilihan untuk mendapatkan koordinat kursor menggunakan kemampuan bahasa ini.
Arahan
Langkah 1
Gunakan sifat objek peristiwa untuk mendapatkan koordinat kursor semasa. Objek ini mempunyai sekumpulan sifat yang relevan untuk menentukan koordinat kursor tetikus. Properti LayerX mengandungi jarak yang diukur dalam piksel dari tepi kiri lapisan semasa, dan LayerY - jarak yang sama dari pinggir atasnya. Kedua-dua sifat ini mempunyai sinonim - bukannya event. LayerX, anda boleh menulis event.x, dan bukannya event. LayerY, anda boleh menulis event.y. Sifat pageX dan pageY memegang koordinat mendatar dan menegak kursor berbanding dengan tepi kiri atas tetingkap penyemak imbas, dan sifat screenX dan screenY memegang nilai yang serupa dengan skrin monitor.
Langkah 2
Tambahkan pemeriksaan jenis penyemak imbas ke kod anda dan gunakan sifat clientX dan clientY sebagai tambahan kepada sifat di atas pada objek acara. Ini perlu kerana Microsoft menggunakan sebutan harta yang berbeza dalam penyemak imbas Internet Explorernya. Anda boleh menggabungkan kedua-dua pendekatan untuk menentukan koordinat, misalnya, seperti ini:
jika (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
lain jika (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Langkah 3
Letakkan kod definisi koordinat dalam fungsi tersuai. Sebagai contoh:
fungsi GetMouse (evevnt) {
var coordinateX = 0, koordinatY = 0;
jika (! evevnt) evevnt = window.event;
jika (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
lain jika (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
kembali {"coordX": coordinateX, "coordY": coordinateY};
}
Fungsi ini mengembalikan susunan dua elemen bernama, yang pertama (dengan kunci coordX) mengandungi koordinat X, dan yang kedua (coordY) mengandungi koordinat Y.
Langkah 4
Panggil fungsi ini pada beberapa acara - contohnya, pada peristiwa bergerak tetikus (onmousemove) dalam konteks dokumen. Contoh di bawah menggunakan fungsi untuk mengeluarkan koordinat tetikus ke bar status:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, koordinat Y:" + CurCoord.coordY + "px";};
