マウス ホイール イベントを監視する JavaScript の簡単な分析_JavaScript スキル

マウス ホイールを使用してフォーム内の数値を増減したり、マウス ホイールを使用してボタンの上下のスクロールを制御したりする効果を誰もが見たことがあります。これらはすべて、マウス ホイールの JS イベント監視を通じて実装されます。今日ここで紹介するのは、マウス ホイール イベントの簡単な JS 監視です。

ブラウザごとに異なるイベント

まず、ブラウザごとにスクロール ホイール イベントが異なります。主に、onmousewheel (Firefox ではサポートされていません) と DOMMouseScroll (Firefox でのみサポートされています) の 2 つのタイプがあります。これら 2 つのイベントについてはここでは詳しく説明しません。詳しく知りたい方は、mousewheel (mousewheel) と を参照してください。 DOMMouseScroll イベント。
さらに、操作中にイベント リスニングを追加する必要があります。コードは次のとおりです。Firefox と互換性があり、addEventListener を使用して監視します。

コードをコピーします。 > コードは次のとおりです:

/*イベントの登録*/

if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false) ;
}//W3C
ウィンドウ .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

jsはスクロールホイールの上下を判定する数値を返します

スクロール ホイールが上か下かを判断する場合、ブラウザの互換性も考慮する必要があります。現在、5 つの主要なブラウザ (IE、Opera、Safari、Firefox、Chrome) のうち、Firefox は Detail を使用し、他の 4 つはブラウザーを使用します。値は一貫性がありません。つまり、detail と WheelDelta はそれぞれ 2 つの値のみを取り、detail は ±120 のみを取ります。正の数は上向きを表し、負の数は下向きを表します。

具体的なコードは次のとおりです。

コードをコピーします コードは次のとおりです:

スクロール値:(IE/Opera)
スクロール値: (Firefox)

上記のコードを実行すると、次のことがわかります:

コードをコピーします

コードは次のとおりです:Firefox 以外のブラウザでは、スクロール ホイール上にスクロールすると値は 120、下にスクロールすると -120 が返されます Firefox ブラウザでは、ホイールを上にスクロールすると値 -3 が返され、下にスクロールすると値 3 が返されます

コード部分は次のとおりです。 .wheelDelta は、Firefox ブラウザ以外かどうかを判断するために使用されます。e.detail は Firefox ブラウザです

if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail) {//Firefox
t2.value=e.detail;
}