Brauzer oynasida kursorning harakatiga javoban ba'zi harakatlarni dasturlash uchun ba'zida uning koordinatalarini aniqlash kerak bo'ladi. Buni brauzerda sodir bo'lgan voqealarni kuzatib borish qobiliyatiga ega bo'lgan skript yordamida amalga oshirish mumkin. Mijoz tomonidagi JavaScript-ni skriptda bunday imkoniyat mavjud. Quyida ushbu tilning imkoniyatlaridan foydalangan holda kursor koordinatalarini olish variantlaridan biri tasvirlangan.
Ko'rsatmalar
1-qadam
Kursorning joriy koordinatalarini olish uchun voqea ob'ekti xususiyatlaridan foydalaning. Ushbu ob'ekt sichqoncha kursorining koordinatalarini aniqlash uchun tegishli bo'lgan barcha xususiyatlar to'plamiga ega. LayerX xususiyati joriy qatlamning chap chetidan piksel bilan o'lchangan masofani va LayerY - uning yuqori chetidan bir xil masofani o'z ichiga oladi. Ushbu ikkita xususiyat sinonimlarga ega - event. LayerX o'rniga event.x yozishingiz mumkin, va event. LayerY o'rniga event.y yozishingiz mumkin. PageX va pageY xossalari brauzer oynasining yuqori chap tomoniga nisbatan kursorning gorizontal va vertikal koordinatalarini, screenX va screenY xossalari esa monitor ekraniga nisbatan o'xshash qiymatlarga ega.
2-qadam
Kodingizga brauzer turini tekshirishni qo'shing va voqea ob'ektidagi yuqoridagi xususiyatlardan tashqari clientX va clientY xususiyatlaridan foydalaning. Bu Microsoft Internet Explorer brauzerida boshqa xususiyat belgisini ishlatgani uchun kerak. Siz koordinatalarni aniqlash uchun ikkala yondashuvni birlashtira olasiz, masalan:
agar (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
else if (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;
}
3-qadam
Koordinatalarni aniqlash kodini maxsus funktsiyaga joylashtiring. Misol uchun:
GetMouse funktsiyasi (evevnt) {
var coordinateX = 0, koordinatY = 0;
agar (! evevnt) evevnt = window.event;
agar (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
else if (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;
}
return {"coordX": coordinateX, "coordY": coordinateY};
}
Ushbu funktsiya ikkita nomlangan elementlardan iborat qatorni qaytaradi, ularning birinchisi (coordX tugmachasi bilan) X koordinatasini, ikkinchisi (coordY) Y koordinatasini o'z ichiga oladi.
4-qadam
Ushbu funktsiyani ba'zi bir hodisalarda chaqiring - masalan, sichqonchani ko'chirish hodisasida (onmousemove) hujjat kontekstida. Quyidagi namunada sichqoncha koordinatalarini holat satriga chiqarish uchun funktsiya ishlatiladi:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, koordinat Y:" + CurCoord.coordY + "px";};
