طريقة الحصول على موقع الفأرة الحالي باستخدام JavaScript

في بعض الأحيان، قد نحتاج إلى الحصول على مسافة سحب النافذة أو تحرك الفأرة، وفي هذه الحالة يمكن الحصول على النتيجة المطلوبة من خلال حساب موقع الفأرة قبل وبعد في الصفحة، وسيتم تقديم بعض خصائص الحدث أدناه:

1、موقع منطقة العرض

　　تحدث جميع أحداث الفأرة في موقع محدد في واجهة المستخدم. يتم حفظ معلومات هذا الموقع في خصائص الحدث clientX وclientY. تعني قيمتها موقع مؤشر الفأرة في واجهة المستخدم عند حدوث الحدث (لا تشمل مسافة التمرير في الصفحة). كما هو موضح في الشكل التالي:

var div = document.getElementById("myDiv"); // تحصل على العنصر
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("مستطيل الشاشة: " + event.screenX + "," + event.screenY);
});

ملاحظة: حيث، EventUtil.on() يعني ربط الحدث على العنصر، EventUtil.getEvent(event) يعني الحصول على عنصر الحدث. EventUtil هو عنصر الحدث المخصص (مكتوب بلغة JavaScript)، ويحتوي على بعض الطرق المتوافقة مع المتصفحات، لمعرفة التفاصيل، راجع المقالة الأخرى "بعض الطرق المتوافقة مع المتصفحات للحصول على الحدث". إذا كان المشروع يستخدم مكتبة jQuery، يمكنك استبدالها بالطريقة المناسبة.

2、موقع الصفحة

　　خصائص العنصر الحدث pageX وpageY، يمكنها إخبارك بمكان حدوث الحدث في الصفحة. على سبيل المثال، تعني هذه الخصائص موقع فأرة الماوس في الصفحة (تقريباً نفس موقع فأرة الماوس في النافذة + مسافة التمرير في الصفحة).

var div = document.getElementById("myDiv"); // تحصل على العنصر ذات id "myDiv"
EventUtil.on(div, "click", function(event){ // قم بربط الحدث click على العنصر
 event = EventUtil.getEvent(event); // تحصل على عنصر الحدث event
 var pageX = event.pageX,pageY = event.pageY;
 if (pageX === undefined){//IE8 و الأقدم
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("مستطيل الصفحة: " + pageX + "," + pageY);
});

3- موقع الشاشة

　　من خلال خصائص screenX وscreenY يمكن تحديد معلومات موقع مؤشر الفأرة عند حدوث الحدث الموسوي على الشاشة. كما هو موضح في الشكل التالي:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("مستطيل الشاشة: " + event.screenX + "," + event.screenY);
});

المقال مأخوذ من كتاب《JavaScript تصميم برمجيات متقدمة الاصدار الثالث》

شكرًا على قراءتك، آمل أن تساعدك هذه المعلومات، شكرًا لدعمك للموقع!