تنفذ JavaScript تعطيل أحداث عجلة الماوس

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

نقوم عادةً بضبط توافق الإصدارات الأقل من IE عندما يتعلق الأمر بالأشياء المتوافقة، ولكن هذه المرة ليس لأن الإصدار الأدنى من المتصفح غير كفء. ذلك لأن Firefox قد ذهب بعيدًا ويتجاهل تمامًا تجربة المتصفحات الأخرى. يمكن لجميع المتصفحات باستثناء Firefox استخدام حدث MouseWheel للتعامل مع استجابة عجلة الماوس. ومع ذلك، فإن Firefox لا يدعم MouseWheel، ويستخدم DOMMouseScroll غير المنطقي، وهو غير متوافق مع المتصفحات الأخرى باستثناء Firefox. بمعنى آخر، للتعامل مع أحداث عجلة الماوس، يمكن لمتصفح فايرفوكس استخدام DOMMouseScroll فقط. يمكن لغير مستخدمي Firefox استخدام MouseWheel فقط. تختلف مبادئ هذين الحدثين، كما تختلف البيانات التي يعالجانها.

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. Firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=MouseWheel);
5. وظيفةMouseWheel(e){
6. e=e||window.event;
8. if(e.stopPropagation)e.stopPropagation();
9. elsee.cancelBubble=true;
11. if(e.preventDefault)e.preventDefault();
12. elsee.returnValue=false;
14. }

دعونا نلقي نظرة على الكود الكامل

1. <!DOCTYPEhtml>
2. <نمط>
3. تمتد {font:14px/20pxMicrosoft Yahei؛}
4. #عداد{
5. العرض: 50 بكسل؛ الارتفاع: 20 بكسل؛
6. الحدود:1pxsolid#CCC؛
7. الخلفية: #F9F9F9؛
8. الخط: 14px/20pxConsola؛
9. محاذاة النص:مركز؛
10. الهامش: 10 بكسل؛
11. }
12. </نمط>
13. <span>استخدم عجلة الماوس لضبط القيمة</span><br/>
14. <divid=counter>0</div>
15. <النص البرمجي>
16. // الحكم على المتصفح
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:undef;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. // احصل على العناصر
21. varcounter=document.getElementById(counter);
22. // حدث عجلة الماوس
23. if(isIE<9)// تستخدم المتصفحات التقليدية حدث MouseWheel
24. counter.attachEvent(onmousewheel,function(){
25. // احسب المسافة التي تمر بها عجلة الماوس
26. // تحتوي الشبكة الواحدة على 3 أسطر، كل سطر يحتوي على 40 بكسل، لذا قسّم على 120
27. varv=event.wheelDelta/120;
28. counter.innerHTML=counter.innerHTML*1+v;
29. // حظر الطريقة الافتراضية للمتصفح
30. returnfalse;
31. });
32. elseif(!isFF)// المتصفحات الحديثة، باستثناء Firefox، تستخدم أيضًا حدث MouseWheel
33. counter.addEventListener(mousewheel,function(e){
34. // احسب المسافة التي تمر بها عجلة الماوس
35. varv=e.wheelDelta/120;
36. counter.innerHTML=counter.innerHTML*1+v;
37. // حظر الطريقة الافتراضية للمتصفح
38. e.preventDefault();
39. }،خطأ شنيع)؛
40. else// يستخدم Firefox الغريب حدث DOMMouseScroll
41. counter.addEventListener(DOMMouseScroll,function(e){
42. // احسب المسافة التي تمر بها عجلة الماوس
43. // تتكون الشبكة الواحدة من 3 أسطر، لكن يرجى ملاحظة أن الاختلاف هنا عن البكسل هو أنها قيمة سالبة
44. varv=-e.detail/3;
45. counter.innerHTML=counter.innerHTML*1+v;
46. // حظر الطريقة الافتراضية للمتصفح
47. e.preventDefault();
48. }،خطأ شنيع)؛
49. </script>

ما ورد أعلاه هو محتوى هذه المقالة بالكامل، وآمل أن تنال إعجابكم جميعًا.