القراءات ذات الصلة:
ملخص تعلم حدث JavaScript (V) نوع حدث الماوس في JS
//www.vevb.com/article/86259.htm
ملخص تعلم حدث JavaScript (ط) تدفق الحدث
//www.vevb.com/article/86261.htm
ملخص تعلم الأحداث JavaScript (4) أعضاء الحدث العام (الخصائص والأساليب)
//www.vevb.com/article/86262.htm
ملخص تعلم حدث JavaScript (II) معالج الأحداث JS
//www.vevb.com/article/86264.htm
ملخص تعلم الأحداث JavaScript (III) كائن حدث JS
أحداث الماوس
يتم تعريف 9 أحداث الماوس في حدث مستوى DOM3.
Mousedown: يتم تشغيله عند الضغط على زر الماوس (يسار أو يمين).
لا يمكن تشغيلها بواسطة لوحة المفاتيح.
Mouseup: يتم تشغيله عند إطلاق زر الماوس ويظهر.
لا يمكن تشغيلها بواسطة لوحة المفاتيح.
انقر: يتم تشغيله عند النقر فوق زر الماوس الأيسر أو الضغط على مفتاح Enter. هذا مهم لضمان إمكانية الوصول ، مما يعني أنه يمكن تنفيذ معالج أحداث OnClick عبر لوحة المفاتيح وعبر الماوس. DBLCLICK: يتم تشغيله عند النقر بنقر مزدوج زر الماوس الأيسر. Mouseover: حرك الماوس على العنصر المستهدف. هذا سوف يطلق النار عندما يتحرك الماوس فوق عناصر نسله. Mouseout: Mouse يزيل العنصر المستهدف أعلاه.
Mouseenter: ينتقل الفأر إلى نطاق العنصر ويؤدي إلى حدوث الحدث ، الذي لا يخدع ، أي أنه لن يؤدي إلى أن ينتقل الماوس إلى عناصر النسل.
MouseLeave: يتم تشغيله عندما ينتقل الماوس من نطاق العناصر ، والحدث لا يفقد ، أي أنه لن يؤدي إلى أن ينتقل الماوس إلى عناصره النسل.
Mousemove: يتم تشغيل الماوس باستمرار عندما يتحرك داخل العنصر.
لا يمكن تشغيلها بواسطة لوحة المفاتيح.
ملحوظة:
يتم تشغيل أحداث Mousedown و Mouseup على التوالي على عنصر لتشغيل حدث النقر. لن يتم تشغيل حدث DBLCLICK إلا إذا تم إطلاق أحداث نقرة واحدة تلو الأخرى.
إذا تم إلغاء أحد Mousedown أو Mouseup ، فلن يتم تشغيل حدث النقر. إذا تم إلغاء حدث النقر بشكل مباشر أو غير مباشر ، فلن يتم تشغيل حدث DBLCLICK.
1. ترتيب الحدث الذي يؤدي
على سبيل المثال: انقر نقرًا مزدوجًا فوق الزر وألقي نظرة على الحدث الذي تم تشغيله أعلاه.
<Body> <input id = "btn" type = "button" value = "click"/> <script> var btn = document.getElementById ("btn") ؛ btn.addeventListener ("mousedown" ، function (event) {console.log ("mousedown") ؛} ، false) ؛ btn.addeventListener ("mouseup" ، function () {console.log ("mouseup") ؛} ، false) ؛ btn.addeventListener ("Click" ، function () {console.log ("click") ؛} ، false) ؛ btn.addeventListener ("dblclick" ، function () {console.log ("dblclick") ؛} ، خطأ) ؛ </script> </body>2. الفرق بين Mouseenter و Mouseover
الفرق:
سيخفق حدث Mouseover ، مما يعني أنه سيطلق النار عندما ينتقل الماوس إلى عناصره المنسدلة.
لا يفقس حدث Mouseenter ، مما يعني أن الماوس لن يطلق النار عندما ينتقل إلى عناصره المنسدلة.
على سبيل المثال:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #outer {position: absolute ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ أعلى: 0 ؛ اليسار: 0 ؛ أسفل: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ خلفية اللون: وردي. } #inner {position: absolute ؛ العرض: 100px ؛ الارتفاع: 100px ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ الهامش اليساري: -50px ؛ خلفية اللون: البرتقالي. محاذاة النص: المركز ؛ رفع الخط: 100px ؛ } #OUTER ، #Inner {Border-Radius: 50 ٪ ؛ } </style> <script src = "jquery -2.1.1.min.js"> </script> </head> <body> <body> <div id = "outer"> <div id = "inner"> </viv> </div> </body> <script> var pustirdiv = dister.getElementByid ("OUTER") ؛ {console.log ("تم تشغيل حدث Mouseover من الوالد Div") ؛} ، خطأ) ؛ // parentdiv.addeventListener ("mouseenter" ، function () {// console.log ("الحدث mouseenter من الوالد div") ؛ //} ، false) ؛ console.log ("حدث الفأرة من الوالد div يتم تشغيله") ؛ //} ، خطأ)ملحوظة:
Mouseover يتوافق مع mouseout ، Mouseenter يتوافق مع MouseLeave. يمكن أن يكون التأثير غير محدد في الكود أعلاه.
يجمع API في JQuery بين Mouseenter و MouseLeave لاستخدامه.
3. أزرار الماوس الأيسر واليمين
<script type = "text/javaScript"> document.onmousedown = function (ev) {var oevent = ev || event ؛ التنبيه (oevent.button) ؛ // زر الماوس الأيسر في IE هو 1 ، زر الماوس الأيمن هو 2 ، وزر الماوس الأيسر في FF وزر الماوس الأيمن في الكروم هو 0 ، زر الماوس الأيمن 2} ؛ </script>4. الفرق بين Mouseover و Mousemove
بشكل عام ، Mouseover يكفي ، ولكن يتم استخدام Mousemove فقط في ظروف خاصة. MouseMove أكثر استهلاكًا للموارد ، مثل مراقبة التغييرات في إحداثيات الماوس.
ما سبق هو ملخص تعلم الأحداث JavaScript الذي قدمه لك المعرفة المتعلقة بالمحرر (V) حول أحداث الماوس لأنواع الأحداث في JS. آمل أن يكون ذلك مفيدًا للجميع!