خصائص MouseEvent clientX

أحداث DOM MouseEvent

التعريف والاستخدام

عندما يتم إطلاق حدث الفأرة، يعود الملف الشخصي clientX إلى إحداثيات مؤشر الفأرة الأفقية (بناءً على منطقة العملاء).

منطقة العملاء هي النافذة الحالية.

نصيحة:للحصول على إحداثيات مؤشر الفأرة العمودية (بناءً على منطقة العملاء)، استخدم خصائص clientY.

ملاحظة:الخصائص فقطقراءة.

مثال

مثال 1

إخراج إحداثيات مؤشر الفأرة عند ضغط زر الفأرة فوق العنصر:

var x = event.clientX;     // الحصول على الإحداثيات الأفقية
var y = event.clientY;     // الحصول على الإحداثيات العمودية
var coor = "X coords: " + x + ", Y coords: " + y;

جرب بنفسك

مثال 2

إخراج إحداثيات مؤشر الفأرة عند تحركه فوق العنصر:

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

جرب بنفسك

مثال 3

توضيح الفرق بين clientX و clientY و screenX و screenY:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

جرب بنفسك

النحو

الحدث.clientX

تفاصيل تقنية

القيمة المعدة: قيمة رقمية، تعبر عن إحداثيات مؤشر الفأرة الأفقية، بالبكسل.
إصدار DOM: DOM Level 2 Events

دعم المتصفح

خصائص Chrome IE Firefox Safari Opera
clientX الدعم الدعم الدعم الدعم الدعم

صفحات مرتبطة

دليل مرجعي DOM HTML:خصائص clientY MouseEvent

دليل مرجعي DOM HTML:خصائص screenX MouseEvent

دليل مرجعي DOM HTML:خصائص screenY MouseEvent

دليل مرجعي DOM HTML:خصائص offsetX MouseEvent

دليل مرجعي DOM HTML:خصائص offsetY MouseEvent

أحداث DOM MouseEvent