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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript のマウスホイール イベント</title> <style> body { padding:5px 10px; } .box { width:300px; height:150px; padding:10px; border:1px solid #999; background:#999; margin-bottom:20px; } .result strong { color:#f00; } </style> <h1>JavaScript のマウスホイール イベント</h1> <ol> <li>IE6、IE7、IE8、Opera 10、Safari 5 はマウスホイールをサポートしています。</li> <li>Firefox 3.5 は DOMMouseScroll をサポートします。</li> <li>IE6、IE7、IE8、Opera 10、Safari 5 は、event.wheelDelta をサポートします。</li> <li>Firefox 3.5、Opera 10 サポート イベントの詳細。</li> <li>event.wheelDelta 値は 120 の倍数です。</li> <li>event.detail の値は 3 の倍数です。</li> </ol> <div id="J_Box01" class="box">マウスホイール イベント: マウスホイール</div> <div id="J_Box02" class="box">マウスホイール イベント: DOMMouseScroll </div> <p id="J_Result" class="result"></p> <p>関連記事: <a href="http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/">http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</a></p>
[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 ;