JavaScriptローラー事件の互換性の書き方
2471 ワード
ローラー事件を研究しているのは、リフォームをしているfullpage.jsです.ローラー事件をモニターしてページをめくる必要があります.実現する過程でいくつかの互換性の問題が発生しました.ついでに一つの方法をカプセル化しました.後で起動しやすいです.しかし、W 3 Cはマウスホイールイベントの仕様を持っていません.各ブラウザメーカーは異なる実装方法を実装しています.イベントの属性も異なり、最も標準的なFireFoxと呼ばれています.プライベートでDOMMouseScrrollを実現しました.ただし、他のブラウザはすべてオンモスワールで実現しているので、互換性のある処理をするのは難しいです.
ブラウザ
実現方法
イベントのプロパティ
上にスクロール
下にスクロール
FireFox
DOMMouseScuroll
detail
-3の倍数
3の倍数
非FireFox
onmousewheel
wheelDelta
120の倍数
-120の倍数
FireFoxでは、DOMMouseScrrollは、例えば、element.addEvent Listener(「DOMMouseScrroll」、Fnc、false)と、addEvent.addEvent Listenerによって結合されなければならない.FireFoxではない限り、addEvent Listener方法のほかに、以下のコードが使えます.element.onmouseweeheel=function(){}パッケージコードは以下の通りです.
ブラウザ
実現方法
イベントのプロパティ
上にスクロール
下にスクロール
FireFox
DOMMouseScuroll
detail
-3の倍数
3の倍数
非FireFox
onmousewheel
wheelDelta
120の倍数
-120の倍数
FireFoxでは、DOMMouseScrrollは、例えば、element.addEvent Listener(「DOMMouseScrroll」、Fnc、false)と、addEvent.addEvent Listenerによって結合されなければならない.FireFoxではない限り、addEvent Listener方法のほかに、以下のコードが使えます.element.onmouseweeheel=function(){}パッケージコードは以下の通りです.
//
// ：type ， "up"（ ） "down"（ ）
function wheel(upFn, downFn) {
// IE6
window.onmousewheel = getWheelDalta;
// Firefox
if(window.addEventListener) {
window.addEventListener("DOMMouseScroll", getWheelDalta, false);
}
//
function getWheelDalta(event) {
var event = event || window.event;
var delta = 0;
// delta ， ；delta ， ；
if (event.wheelDelta) {
// IE ， wheelDelta ； ，wheelDelta 120 ； ，wheelDelta -120 ；
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
// Firefox detail ； ，detail -3 ； ，detail 3 ；
delta = -event.detail/3;
}
//
if(delta > 0) {
upFn();
}else {
downFn();
}
// ，
prevent(event);
function prevent(evt){
if(evt.preventDefault){
evt.preventDefault();
}else{
evt.returnValue = false;
}
}
}
}function wheelUp() {
alert("wheelUp");
}
function wheelDown() {
alert("wheelDown");
}
wheel(wheelUp, wheelDown);