[JS]-onmusewheelイベント(互換IE,FF)
13067 ワード
ソース:http://www.denisdeng.com/?p=685
ユーザーはGoogle Mapをブラウズするとき、マウスを上または下にスクロールすることで地図を拡大または縮小できることに気づいたと信じています.実は、マウスのスクロールにはよく知られていません.しかし、要素にマウスのスクロールイベントをバインドするには、このイベントについて詳しく理解する必要があります.
ブラウザのこのイベントのサポート状況はどうですか?IE 6,Opera 9+,Safari 2+およびFirefox 1+はいずれも「onmousewheel」イベントをサポートしており,FF 3.xではこれに相当する「DOMMouseScroll」イベントである.「onmousewheel」はイベント名として使用され、認識されません.したがって、各ブラウザで実行できるようにするには、異なるブラウザに対して異なるイベントをバインドする必要があります.
上のコードはdocumentにmousewheelイベントをバインドし、すべてのブラウザで実行できます.しかし、マウスを上または下に移動するたびに、どれだけスクロールしましたか?このイベントがトリガーされると、non-FFブラウザでは、その距離を記録するのは「wheelDelta」であり、常に120の倍数を返します(120はmouseが上にスクロールすることを示し、-120はマウスが下にスクロールすることを示します).FFでは、スクロール距離を記録するのが「detail」属性で、3の倍数を返します(3はmouseが下にスクロールすることを示し、-3はmouseが上にスクロールすることを示します).
Operaがonmousewheelイベントに応答すると、「wheelDelta」と「detail」のプロパティが同時に存在することに注意してください.「detail」属性はFFと同じ値を返します.したがって,Operaに対しては「detail」属性でmouseスクロールの距離をとるべきである.スクロールイベントがトリガーされると、整数1または-1が得られます.以上の解析により,我々が望む値を容易に得ることができ,「wheelDelta」については120で除算し,「detail」については3で除算すればよい.
上記の解析では、オブジェクトにmousewheelイベントをバインドする独自の関数を構築できます.すなわち、
私がこの文章を書いたとき、jQueryはjquery.mousewheelプラグインを開発しました.このプラグインを使用すると、mousewheelイベントをオブジェクトにバインドするのに便利です.
表示demo
関連資料 The onmousewheel event of JavaScript onmousewheel Event Mouse wheel programming in JavaScript
ユーザーはGoogle Mapをブラウズするとき、マウスを上または下にスクロールすることで地図を拡大または縮小できることに気づいたと信じています.実は、マウスのスクロールにはよく知られていません.しかし、要素にマウスのスクロールイベントをバインドするには、このイベントについて詳しく理解する必要があります.
ブラウザのこのイベントのサポート状況はどうですか?IE 6,Opera 9+,Safari 2+およびFirefox 1+はいずれも「onmousewheel」イベントをサポートしており,FF 3.xではこれに相当する「DOMMouseScroll」イベントである.「onmousewheel」はイベント名として使用され、認識されません.したがって、各ブラウザで実行できるようにするには、異なるブラウザに対して異なるイベントをバインドする必要があります.
var
mousewheelevt
=
(
/
Firefox
/
i.test(navigator.userAgent))
?
"
DOMMouseScroll
"
:
"
mousewheel
"
//
FF doesn't recognize mousewheel as of FF3.x
if
(document.attachEvent)
//
if IE (and Opera depending on user setting)
document.attachEvent(
"
on
"
+
mousewheelevt,
function
(e){alert(
'
Mouse wheel movement detected!
'
)})
else
if
(document.addEventListener)
//
WC3 browsers
document.addEventListener(mousewheelevt,
function
(e){alert(
'
Mouse wheel movement detected!
'
)},
false
)
上のコードはdocumentにmousewheelイベントをバインドし、すべてのブラウザで実行できます.しかし、マウスを上または下に移動するたびに、どれだけスクロールしましたか?このイベントがトリガーされると、non-FFブラウザでは、その距離を記録するのは「wheelDelta」であり、常に120の倍数を返します(120はmouseが上にスクロールすることを示し、-120はマウスが下にスクロールすることを示します).FFでは、スクロール距離を記録するのが「detail」属性で、3の倍数を返します(3はmouseが下にスクロールすることを示し、-3はmouseが上にスクロールすることを示します).
Operaがonmousewheelイベントに応答すると、「wheelDelta」と「detail」のプロパティが同時に存在することに注意してください.「detail」属性はFFと同じ値を返します.したがって,Operaに対しては「detail」属性でmouseスクロールの距離をとるべきである.スクロールイベントがトリガーされると、整数1または-1が得られます.以上の解析により,我々が望む値を容易に得ることができ,「wheelDelta」については120で除算し,「detail」については3で除算すればよい.
function
displayDelta(e){
var
evt
=
window.event
||
e;
var
delta
=
evt.detail
?
-
evt.detail
/
3
: evt.wheelDelta
/
120
;
return
delta ;
}
上記の解析では、オブジェクトにmousewheelイベントをバインドする独自の関数を構築できます.すなわち、
function
wheel(obj, fn ,useCapture){
var
mousewheelevt
=
(
/
Firefox
/
i.test(navigator.userAgent))
?
"
DOMMouseScroll
"
:
"
mousewheel
"
//
FF doesn't recognize mousewheel as of FF3.x
if
(obj.attachEvent)
//
if IE (and Opera depending on user setting)
obj.attachEvent(
"
on
"
+
mousewheelevt, handler, useCapture);
else
if
(obj.addEventListener)
//
WC3 browsers
obj.addEventListener(mousewheelevt, handler, useCapture);
function
handler(event) {
var
delta
=
0
;
var
event
=
window.event
||
event ;
var
delta
=
event.detail
?
-
event.detail
/
3 : event.wheelDelta
/
120
;
if
(event.preventDefault)
event.preventDefault();
event.returnValue
=
false
;
return
fn.apply(obj, [event, delta]);
}
}
私がこの文章を書いたとき、jQueryはjquery.mousewheelプラグインを開発しました.このプラグインを使用すると、mousewheelイベントをオブジェクトにバインドするのに便利です.
表示demo
関連資料