أحداث الماوس

في هذا الفصل سنتناول المزيد حول أحداث الماوس وخصائصها.

يرجى ملاحظة: هذه الأحداث ليست مقتصرة على "الماوس " ولكن تأتى أيضاً من أجهزة أخرى مثل الهواتف والأجهزة اللوحية، والتى يتم مضاهاتها للتوافق.

أنواع أحداث الماوس

لقد راينا بالفعل بعض هذه الأحداث:

mousedown/mouseup

:استخدام زر الماوس في النقر / تحرير النقر عن العنصر .

mouseover/mouseout

تحريك مؤشر الماوس فوق / خارج العنصر.

mousemove

يعمل هذا الحدث فعلياً مع كل حركة لمؤشر الماوس فوق العنصر.

click

يعمل بعد mousedownثم mouseup على نفس العنصر بإستخدام الزر الأيسر للماوس.

dblclick

يعمل بعد النقر مرتين على نفس العنصر خلال فترة زمنية قصيرة. نادرا ما يستخدم في الوقت الحاضر.

contextmenu

Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it’s not exactly the mouse event.

يعمل عندما يتم الضغط على زر الفأرة الأيمن. وهناك طرق أخرى لفتح قائمة السياق ، على سبيل المثال باستخدام مفتاح معين من لوحة المفاتيح ، ويمكن أيضًا استخدامه في هذه الحالة ، لذا فهو ليس بالضبط حدث للماوس .

… وهناك أيضا العديد من الأحداث الأخرى ، واللتى سنتطرق لها لاحقًا .

ترتيب الأحداث

كما ترى من القائمة السابقة ، قد يقوم إجراء المستخدم بتشغيل أكثر من حدث أو أحداث متعددة

على سبيل المثال , عند النقر على الزر الايسر فإن أول حدث يتم تشغيله mousedown, عند الضغط على الزر, ثم mouseup وبالتالي أيضا click عند تحرير النقر.

In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order mousedown → mouseup → click.

لمعاينة الأحداث بوضوح أنقر فوق الزر أدناه. جرب النقر مرتين أيضاً.

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

كما يمكننا أن نرى button الذي يسمح لنا باكتشاف زر الماوس ، كما هو موضح أدناه.

زر الماوس

تحتوي دائما الأحداث المتعلقة بالنقر على خاصية button, والتي تسمح لك بأستخدام زر الماوس.

We usually don’t use it for click and contextmenu events, because the former happens only on left-click, and the latter – only on right-click.

From the other hand, mousedown and mouseup handlers may need event.button, because these events trigger on any button, so button allows to distinguish between “right-mousedown” and “left-mousedown”.

القيم المحتملة لـ event.button هي:

تحتوي معظم أجهزة الماوس على الزرين الأيسر والأيمن فقط ، لذا فإن القيم المحتملة هي “0” أو “2”. وكذلك الأجهزة التي تعمل باللمس أيضًا تولد أحداثًا مماثلة عندما ينقر عليها .

Also there’s event.buttons property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at MDN if you ever need it.

مفاتيح التعديل: shift, alt, ctrl و meta

تتضمن جميع أحداث الماوس معلومات عند الضغط على مفاتيح التعديل

خصائص الحدث :

• shiftKey: Shift
• altKey: Alt (أو Opt لنظام تشغيل Mac)
• ctrlKey: Ctrl
• metaKey: Cmd لنظام Mac

تكون القيمة true   إذا تم الضغط على المفتاح المقابل أثناء الحدث.

على سبيل المثال, الزر أدناه يعمل فقط عند الضغط على Alt+Shift ثم النقر :

<button id="button">Alt+Shift+أنقر علي!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('مرحى!');
    }
  };
</script>

الأحداثيات: clientX/Y, pageX/Y

جميع أحداث الماوس توفر إحداثيات بطريقتين:

1. نسبي-للنافذة: clientX و clientY.
2. نسبي-للمستند: pageX و pageY.

وقد غطينا بالفعل الإختلاف بينهما في فصل الإحداثيات.

بإختصار , الأحداثيات النسبية-للمستند pageX/Y يتم حسابها من الزاوية العلويه اليسرى للمستند, ولا تتغير أو تتأثر عند تمرير الصفحة, بينما clientX/Y تحسب من الواوية العلوية اليسرى للنافذة الحالية. وعندما يتم تمرير الصفحة , فإنها تتغير.

على سبيل المثال, إذا كان لدينا نافذة بحجم 500x500, ومؤشر الماوس في الزاوية العلوية اليسرى , فإن clientX و clientY تكون 0, بغض النظر عن أى تمرير للصفحة.

وإذا كان مؤشر الماوس في المنتصف, فإن clientX و clientY تكون 250, بغض النظر عن مكانه في المستند. وهي تتشابه مع position:fixed في هذا الجانب.

حرك الماوس فوق حقل الإدخال لرؤية clientX/clientY (هذا المثال موجود في iframe, لذا فإن الأحداثيات مرتبطة بهذا iframe):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="حرك الماوس فوقي">

منع الإختيار في الماوس

النقر المزدوج بزر الماوس له تأثير جانبي قد يكون غير ملائم في بعض الواجهات: فهو يحدد النص.

For instance, double-clicking on the text below selects it in addition to our handler:

<span ondblclick="alert('dblclick')">أنقر مرتين علي</span>

إذا قمت بالضغط مع الإستمرار على زر الماوس الأيسر, ودون تحرير الزر , “إضغط مع الإستمرار على الماوس”,فسيكون هناك أيضًا تحديد , وقد يكون على غير ما تريد.

هناك عدة طرق لمنع التحديد , بإمكانك أن تقرأ عنها في فصل Selection and Range.

في هذه الحالة ، فإن الطريقة الأكثر منطقية هي منع إجراء المتصفح من mousedown. وسيؤدي هذا الى الغاء كل هذه التحديدات:

قبل...
<b ondblclick="alert('Click!')" onmousedown="return false">
  أنقر مرتين علي
</b>
...بعد

الآن لم يتم تحديد العنصر بالخط العريض بنقرات مزدوجة ، ولن يؤدي الضغط على الزر الأيسر عليه إلى بدء التحديد.

يرجى ملاحظة أن النص الموجود بداخله لا يزال قابلاً للتحديد. ومع ذلك ، يجب ألا يبدأ التحديد في النص نفسه ، ولكن قبله أو بعده. عادة هذا جيد للمستخدمين.

<div oncopy="alert('Copying forbidden!');return false">
عزيزي المستخدم،
 النسخ ممنوع لك.
 إذا كنت تعرف JS أو HTML ، فيمكنك الحصول على كل شيء من مصدر الصفحة.
</div>

ملخص

تتميز أحداث الماوس بالخصائص التالية:

• زر: button.

• مفاتيح التعديل (true إذا تم الضغط عليه): altKey, ctrlKey, shiftKey و metaKey (Mac).

• إذا كنت تريد التعامل معها Ctrl, لذا لا تنسى Mac مستخدمي , عادة ما يستخدم Cmd, لذلك من الأفضل التحقق if (e.metaKey || e.ctrlKey).

• إحداثيات النافذة: clientX/clientY.

• إحداثيات المستند: pageX/pageY.

الإجراء الافتراضي للحدث mousedown هو تحديد النص, إذا كان من المرجح أن يتدخل في الواجهة يمكنك إلغاؤه.

في الفصل التالي ، سنرى المزيد من التفاصيل حول الأحداث التي تتبع حركة المؤشر وكيفية تتبع تغييرات العناصر تحت المؤشر