マウスホイールイベント_JavaScript スキルに関する簡単な説明-jsチュートリアル-php.cn

マウスホイールイベント_JavaScript スキルに関する簡単な説明

WBOY

リリース： 2016-05-16 18:19:37

オリジナル

1264 人が閲覧しました

実際、ほとんどのブラウザ (IE6、IE7、IE8、Opera 10、Safari 5) は「マウスホイール」イベントを提供します。残念ながら、Firefox 3.5 はこのイベントをサポートしていません。幸いなことに、Firefox 3.5 は別の同等のイベント「DOMMouseScroll」(イベントとイベントプロパティのテストケース) を提供します。

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

OK異なるブラウザ間の実装の違いを考慮して、互換性のあるコードは次のとおりです:

コードをコピー

コードは次のとおりです。以下のように:

 
var addEvent = (function(){ 
if (window.addEventListener) { 
return function(el, sType, fn, capture) { 
el. addEventListener(sType, fn, (capture)) ; 
}; 
} else if (window.attachEvent) { 
return function(el, sType, fn, capture) { 
el.attachEvent( "on" sType, fn); 
}; else { 
return function(){}; 
})(), 
// isFirefox は疑似コードです自分で実装できます。 
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; 
// オブジェクトも疑似コードなので、マウスホイール イベントの要素を登録する必要があります 
addEvent(object, Mousewheel, function) (event){ 
event = window.event; 
// todo 
}, 

 

達成されるインタラクティブな効果に戻りましょうここで、解決する必要のある問題が他にもいくつかあります:
1. ページのフォントを拡大する必要がありますか? ==> マウスホイールは上または下にスクロールしますか?
2. ページフォントのスケーリングの倍数は何ですか? ==> マウスホイールのスクロール範囲はどれくらいですか？
幸いなことに、この情報はイベントのいくつかの属性値を通じて取得できます:
1. 「mousewheel」イベントの「event.wheelDelta」属性値: 戻り値 (正の場合)値は、ホイールが上にスクロールしていることを意味します。負の値の場合は、ホイールが下にスクロールしていることを意味します。戻り値はすべて 120 の倍数、つまり、振幅 = 戻り値 / 120 です。
2. "DOMMouseScroll" イベントの "event.detail" 属性値: 戻り値。負の値の場合は、ホイールが上にスクロールしていることを意味します ("event.wheelDelta" の逆)。正の値の場合は、ホイールが上にスクロールしていることを意味します。戻り値はすべて 3 の倍数、つまり振幅 = 戻り値/3 です。
3. 「mousewheel」イベントは、Opera 10 の特殊なケースです。「event.wheelDelta」属性と「event.detail」属性の両方があります。
注: 上記の 3 番目の点については、「JavaScript の onmousewheel イベント」の記事に次のコメントがあります:

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

Opera では、「detail」は FF と同じ値を返すため、大きな O については「wheelDelta」ではなく「detail」に依存する必要があります。 Opera のバージョンによっては、IE の場合とは異なる値が返される場合があります。
ただし、テスト後、Opera 9 および Opera 10 のevent.wheelDelta 属性は他のブラウザーとまったく同じように動作し、例外やエラーは見つかりませんでした。インターフェイスの観点からは、最初に「event.wheelDelta」を使用する必要があります。コードプロパティで。
この時のコードは以下の通りです:

コードをコピーコードは以下の通りです:

 
var addEvent = ( function(){ 
if (window.addEventListener) { 
return function(el, sType, fn, Capture) { 
el.addEventListener(sType, fn, (capture) ); 
}; 
} else if (window.attachEvent) { 
return function(el, sType, fn, capture) { 
el.attachEvent("on" sType, fn); 🎜>}; 
 } else { 
return function(){}; 
} 
})(), 
stopEvent: function(event) { 
if (event.stopPropagation) ) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
if (event.preventDefault) { 
event.preventDefault(); 🎜>} else { 
event.returnValue = false; 
} 
}, 
zoomIn = function(){}, 
zoomOut = function(){}, 
// isFirefox は疑似コードです。自分で実装できます。 
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel" 
// オブジェクトは疑似コードです。マウスホイール イベントの要素を登録する必要があります。 
addEvent(object) , マウスホイール, function(event){ 
var delta = 0; 
stopEvent(event); (event.wheelDelta / 120) : (-event.detail / 3 ; 

マウスホイール イベント_JavaScript スキルに関する簡単な説明

マウスホイールイベント_JavaScript スキルに関する簡単な説明