JavaScript ดำเนินการปิดการใช้งานเหตุการณ์ล้อเมาส์

บทความนี้จะแนะนำข้อมูลที่เกี่ยวข้องเกี่ยวกับการปิดใช้งานเหตุการณ์ล้อเลื่อนของเมาส์ใน JavaScript เป็นหลัก เพื่อนๆ ที่ต้องการความช่วยเหลือสามารถอ้างอิงถึงข้อมูลนี้ได้

โดยปกติแล้วเราจะปรับความเข้ากันได้ของ IE เวอร์ชันต่ำกว่าเมื่อพูดถึงสิ่งที่เข้ากันได้ แต่คราวนี้ไม่ใช่เพราะเบราว์เซอร์เวอร์ชันต่ำกว่านั้นไร้ความสามารถ นั่นเป็นเพราะว่า Firefox ก้าวไปไกลเกินไปและไม่สนใจประสบการณ์ของเบราว์เซอร์อื่นโดยสิ้นเชิง เบราว์เซอร์ทั้งหมดยกเว้น Firefox สามารถใช้เหตุการณ์ MouseWheel เพื่อจัดการการตอบสนองของล้อเมาส์ อย่างไรก็ตาม Firefox ไม่รองรับ MouseWheel และใช้ DOMMouseScroll ไร้สาระ ซึ่งเข้ากันไม่ได้กับเบราว์เซอร์อื่นยกเว้น Firefox กล่าวอีกนัยหนึ่ง สำหรับการจัดการเหตุการณ์ล้อเมาส์ Firefox สามารถใช้ได้เฉพาะ DOMMouseScroll เท่านั้น Non-Firefox สามารถใช้ได้เฉพาะ MouseWheel เท่านั้น หลักการของเหตุการณ์ทั้งสองนี้แตกต่างกัน และข้อมูลการประมวลผลก็แตกต่างกันเช่นกัน

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=ล้อเมาส์);
5. functionMouseWheel(e){
6. e=e||window.event;
8. ถ้า(e.stopPropagation)e.stopPropagation();
9. elsee.cancelBubble=true;
11. ถ้า(e.preventDefault)e.preventDefault();
12. elsee.returnValue=false;
14. -

มาดูโค้ดแบบเต็มกันดีกว่า

1. <!DOCTYPEhtml>
2. <สไตล์>
3. ช่วง{font:14px/20pxMicrosoft Yahei;}
4. #เคาน์เตอร์{
5. ความกว้าง:50px;ความสูง:20px;
6. เส้นขอบ:1pxsolid#CCC;
7. พื้นหลัง:#F9F9F9;
8. แบบอักษร:14px/20pxConsolas;
9. การจัดตำแหน่งข้อความ: กึ่งกลาง;
10. ระยะขอบ:10px;
11. -
12. </สไตล์>
13. <span>ใช้ล้อเลื่อนของเมาส์เพื่อปรับค่า</span><br/>
14. <หาร=เคาน์เตอร์>0</div>
15. <สคริปต์>
16. //ตัดสินเบราว์เซอร์
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:ไม่ได้กำหนด;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //รับองค์ประกอบ
21. varcounter=document.getElementById(เคาน์เตอร์);
22. //กิจกรรมล้อเมาส์
23. if(isIE<9)//เบราว์เซอร์ดั้งเดิมใช้เหตุการณ์ MouseWheel
24. counter.attachEvent (onmousewheel, ฟังก์ชั่น () {
25. //คำนวณระยะทางที่ล้อเมาส์เลื่อน
26. //หนึ่งตารางมี 3 เส้น แต่ละบรรทัดมี 40 พิกเซล ดังนั้นหารด้วย 120
27. varv=event.wheelDelta/120;
28. counter.innerHTML=counter.innerHTML*1+v;
29. //บล็อกวิธีการเริ่มต้นของเบราว์เซอร์
30. กลับเท็จ;
31. -
32. elseif(!isFF)//เบราว์เซอร์สมัยใหม่ยกเว้น Firefox ก็ใช้เหตุการณ์ MouseWheel เช่นกัน
33. counter.addEventListener (ล้อเมาส์, ฟังก์ชั่น (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,ฟังก์ชัน(e){
42. //คำนวณระยะทางที่ล้อเมาส์เลื่อน
43. //หนึ่งตารางมี 3 เส้น แต่โปรดทราบว่าความแตกต่างจากพิกเซลคือเป็นค่าลบ
44. varv=-e.detail/3;
45. counter.innerHTML=counter.innerHTML*1+v;
46. //บล็อกวิธีการเริ่มต้นของเบราว์เซอร์
47. e.preventDefault();
48. },เท็จ);
49. </สคริปต์>

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าทุกคนจะชอบมัน