آموزش طراحی سایت (HTML CSS Javascript) | آتریا

رویداد clientX

مثال (رویداد clientX)

برگرداندن مختصات اشاره گر موس در خروجی، هنگامی که بر روی یک عنصر کلیک می شود:

var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

خروجی coor در کد بالا:

X coords: 142, Y coords: 99

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

خصوصیت clientX، هنگام اجرای یک رویداد موس (نسبت به پنجره کنونی)، مختصات افقی موس(x) را برمی گرداند.

نکته: برای گرفتن مختصات عمودی اشاره گر موس، از خصوصیت clientY استفاده کنید.

نکته: این رویداد "فقط خواندنی" می باشد.

پشتیبانی مرورگرها

متد
clientX	بله	بله	بله	بله	بله

نحوه استفاده

event.clientX

جزئیات تکنیکی

مقدار برگشتی	یک عدد که مختصات افقی موس را به پیکسل برمی گرداند
DOM Version:	DOM Level 2 Events

مثال - خودتان امتحان کنید

مثال (رویداد clientX)

برگرداندن مختصات موس هنگامی که اشاره گر موس بر روی یک عنصر حرکت می کند:

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

خودتان امتحان کنید »

مثال (رویداد clientX)

یک نسخه نمایشی برای مشخص کردن اختلاف بین 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;

خودتان امتحان کنید »

آموزش های مرتبط

مرجع مدل DOM در اچ تی ام ال MouseEvent clientY Property

مرجع مدل DOM در اچ تی ام ال MouseEvent screenX Property

مرجع مدل DOM در اچ تی ام ال MouseEvent screenY Property

مرجع کلیه رویدادهای JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 6184

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی