لقد رأينا جميعًا هذه التأثيرات ، باستخدام عجلة الماوس لتحقيق زيادة أو انخفاض الرقم في شكل معين ، أو يتحكم عجلة التمرير في اليسار واليمين للزر والتمرير لأعلى ولأسفل. يتم تحقيق كل هذه من خلال مراقبة حدث JS لعجلة الماوس. اليوم سأقدم القليل من الاستماع إلى أحداث عجلة الماوس.
أحداث مختلفة في متصفحات مختلفة
بادئ ذي بدء ، المتصفحات المختلفة لديها أحداث التمرير المختلفة. يوجد أساسا نوعان: onMouseWheel (لا يدعم Firefox) و dommescroll (يدعم Firefox فقط). لن أشرح هذين الحدثين بالتفصيل هنا. إذا كنت تريد أن تعرف ، يرجى الانتقال: Mousewheel (Mousewheel) و Dommescroll أحداث.
بالإضافة إلى ذلك ، يجب إضافة الاستماع إلى الحدث أثناء التشغيل ، الرمز كما يلي: متوافق مع Firefox ، استخدم AddeventListener للاستماع
انسخ الرمز كما يلي:/*سجل الحدث*/
if (document.adDeventListener) {
document.addeventListener ('dommescroll' ، scrollfunc ، false) ؛
} // W3C
window.onmousewheel = document.onmousewheel = scrollfunc ؛ // ie/opera/chrome
JS إرجاع القيمة العددية لتحديد أعلى وأسفل عجلة التمرير
يجب أيضًا النظر في التوافق في المتصفح عند تحديد ما إذا كانت عجلة التمرير أعلى أو لأسفل. الآن يستخدم Firefox التفاصيل في المتصفحات الرئيسية الخمسة (أي الأوبرا ، Safari ، Firefox ، Chrome) ، والفئات الأربع الأخرى تستخدم Wheeldelta ؛ الاثنان غير متناسقين فقط من حيث القيم ، مما يعني أن المعنى متسق. لا تأخذ التفاصيل و Wheeldelta سوى قيمتين لكل منهما ، والتفاصيل تستغرق فقط ± 3 ، ويستغرق Wheeldelta فقط 120 ، حيث يتم تمثيل الأرقام الإيجابية على أنها أعلى ويتم تمثيل الأرقام السلبية على أنها أسفل.
الرمز المحدد كما يلي:
نسخة الكود كما يلي:
<label for = "wheeldelta" value scroll: </label> (ie/opera) <input type = "text" id = "wheeldelta"/>
<label for = "detail"> قيمة التمرير: (Firefox) </label> <input type = "text" id = "detail"/>
<script type = "text/javaScript">
var scrollfunc = function (e) {
E = E || window.event ؛
var t1 = document.getElementById ("wheeldelta") ؛
var t2 = document.getElementById ("التفاصيل") ؛
إذا (e.wheeldelta) {// ie/opera/chrome
t1.value = e.wheeldelta ؛
} آخر إذا (e.detail) {// firefox
t2.value = e.detail ؛
}
}
/*سجل الحدث*/
if (document.adDeventListener) {
document.addeventListener ('dommescroll' ، scrollfunc ، false) ؛
} // W3C
window.onmousewheel = document.onmousewheel = scrollfunc ؛ // ie/opera/chrome
</script>
من خلال تشغيل الرمز أعلاه يمكننا أن نرى:
نسخة الكود كما يلي:
في المتصفحات غير firefox ، تكون القيمة التي يتم إرجاعها بواسطة تمرير عجلة التمرير لأعلى 120 ، والقيمة التي يتم إرجاعها بواسطة التمرير لأسفل هي -120
في متصفح Firefox ، تكون القيمة التي يتم إرجاعها بواسطة عجلة التمرير لأعلى -3 ، والقيمة التي يتم إرجاعها بواسطة التمرير لأسفل هي 3.
جزء الكود كما يلي: E.Wheeldelta يحدد ما إذا كان متصفحًا غير Firefox ، و E.Detail هو متصفح Firefox
إذا (e.wheeldelta) {// ie/opera/chrome
t1.value = e.wheeldelta ؛
} آخر إذا (e.detail) {// firefox
t2.value = e.detail ؛
}
ملاحظة: هنا أوصي بأداة استعلام عبر الإنترنت حول أحداث JS ، والتي تلخص أنواع الأحداث شائعة الاستخدام ووظائف JS:
قائمة كاملة من أحداث ووظائف JavaScript:
http://tools.vevb.com/table/javaScript_event