JavaScript はマウスホイールイベントの無効化を実装します

この記事では、JavaScript でのマウス ホイール イベントの無効化に関する関連情報を主に紹介します。必要な方は参考にしてください。

通常、IE の互換性に関しては下位バージョンの互換性を調整しますが、今回はブラウザの下位バージョンが機能しないためではありません。それは、Firefox が行き過ぎていて、他のブラウザのエクスペリエンスを完全に無視しているためです。 Firefox を除くすべてのブラウザは、MouseWheel イベントを使用してマウス ホイールの応答を処理できます。ただし、Firefox は MouseWheel をサポートしておらず、Firefox 以外の他のブラウザと互換性のない無意味な DOMMouseScroll を使用します。つまり、Firefox はマウス ホイール イベントの処理に DOMMouseScroll のみを使用できます。 Firefox 以外では MouseWheel のみを使用できます。これら 2 つのイベントの原理は異なり、処理されるデータも異なります。

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=マウスホイール);
5. functionMouseWheel(e){
6. e=e||ウィンドウ.イベント;
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/20pxマイクロソフト弥平;}
4. ＃カウンタ{
5. 幅:50ピクセル;高さ:20ピクセル;
6. ボーダー:1pxsolid#CCC;
7. 背景:#F9F9F9;
8. フォント:14px/20pxConsolas;
9. テキスト整列:中央;
10. マージン:10px;
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]:未定義;
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. // 1 つのグリッドには 3 つのラインがあり、各ラインは 40 ピクセルなので、120 で割ります。
27. varv=event.wheelDelta/120;
28. counter.innerHTML=counter.innerHTML*1+v;
29. // ブラウザのデフォルトメソッドをブロックする
30. false を返します。
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. //1つのグリッドは3行ですが、ピクセルとの違いは負の値であることに注意してください
44. varv=-e.detail/3;
45. counter.innerHTML=counter.innerHTML*1+v;
46. // ブラウザのデフォルトメソッドをブロックする
47. e.preventDefault();
48. }、間違い）;
49. </script>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。