لبرمجة بعض الإجراءات استجابةً لحركة المؤشر في نافذة المتصفح ، من الضروري أحيانًا تحديد إحداثياتها. يمكن القيام بذلك عن طريق برنامج نصي لديه القدرة على تتبع الأحداث التي تحدث في المتصفح. يحتوي برنامج JavaScript النصي من جانب العميل على هذه الإمكانية. فيما يلي وصف لأحد الخيارات للحصول على إحداثيات المؤشر باستخدام إمكانيات هذه اللغة.
تعليمات
الخطوة 1
استخدم خصائص كائن الحدث للحصول على الإحداثيات الحالية للمؤشر. يحتوي هذا الكائن على مجموعة كاملة من الخصائص ذات الصلة بتحديد إحداثيات مؤشر الماوس. تحتوي خاصية LayerX على المسافة المقاسة بالبكسل من الحافة اليسرى للطبقة الحالية ، و LayerY - نفس المسافة من الحافة العلوية. هاتان الخاصيتان لهما مرادفات - بدلاً من event. LayerX ، يمكنك كتابة event.x ، وبدلاً من event. LayerY ، يمكنك كتابة event.y. تحتوي خصائص pageX و pageY على الإحداثيات الأفقية والرأسية للمؤشر بالنسبة إلى الحافة العلوية اليسرى من نافذة المتصفح ، وخصائص screenX و screenY تحمل قيمًا متشابهة بالنسبة لشاشة العرض.
الخطوة 2
أضف فحص نوع المتصفح إلى التعليمات البرمجية الخاصة بك واستخدم خصائص clientX و clientY بالإضافة إلى الخصائص المذكورة أعلاه في كائن الحدث. يعد هذا ضروريًا لأن Microsoft تستخدم تعيين خاصية مختلف في مستعرض Internet Explorer الخاص بها. يمكنك الجمع بين كلا الأسلوبين لتحديد الإحداثيات ، على سبيل المثال ، مثل هذا:
إذا (evevnt.pageX || evevnt.pageY) {
تنسيق X = evevnt.pageX ؛
تنسيق Y = evevnt.pageY ؛
}
else if (evevnt.clientX || evevnt.clientY) {
تنسيق X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft ؛
تنسيق Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop ؛
}
الخطوه 3
ضع كود تعريف الإحداثيات في وظيفة مخصصة. فمثلا:
وظيفة GetMouse (evevnt) {
var تنسيق X = 0 ، تنسيق Y = 0 ؛
if (! evevnt) evevnt = window.event ؛
إذا (evevnt.pageX || evevnt.pageY) {
تنسيق X = evevnt.pageX ؛
تنسيق Y = evevnt.pageY ؛
}
else if (evevnt.clientX || evevnt.clientY) {
تنسيق X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft ؛
تنسيق Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop ؛
}
إرجاع {"تنسيق": تنسيق ، "تنسيق": تنسيق Y} ؛
}
تُرجع هذه الدالة مصفوفة من عنصرين محددين ، يحتوي أولهما (باستخدام مفتاح الإحداثيات) على إحداثي س ، والثاني (تنسيق ص) يحتوي على إحداثي ص.
الخطوة 4
قم باستدعاء هذه الوظيفة في حدث ما - على سبيل المثال ، عند حركة الماوس (onmousemove) في سياق المستند. يستخدم النموذج أدناه دالة لإخراج إحداثيات الماوس إلى شريط الحالة:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt) ؛ window.status = "تنسيق X:" + CurCoord.coordX + "بكسل ، تنسيق Y:" + CurCoord.coordY + "px" ؛}؛
