WheelEvent DOM事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。
該事件爲標準規定的事件介面。早期的瀏覽器實現過
MouseWheelEvent
和MouseScrollEvent
兩種滾輪事件介面,但這兩種介面皆非標準,加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。注意事項: 請勿想當然依據滾輪方向(即該事件的各delta屬性值)來推斷文檔內容的滾動方向,因標準未定義滾輪事件具體會引發什麼樣的行爲,引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲,也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向,可在文檔內容滾動事件(
scroll
)中監視scrollLeft
和scrollTop
二值變化情況,即可推斷出滾動方向了。建構式
WheelEvent()
- 建立一個
WheelEvent
物件。
屬性
該介面繼承了父介面MouseEvent
、UIEvent
、Event
的屬性。
WheelEvent.deltaX
Read only- 返回
double
值,該值表示滾輪的橫向滾動量。 WheelEvent.deltaY
Read only- 返回
double
值,該值表示滾輪的縱向滾動量。 WheelEvent.deltaZ
Read only- 返回
double
值,該值表示滾輪的z軸方向上的滾動量。 WheelEvent.deltaMode
Read only- 返回
unsigned long
值,該值表示上述各delta的值的單位。該值及所表示的單位如下:常數 值 描述 DOM_DELTA_PIXEL
0x00
滾動量單位爲像素。 DOM_DELTA_LINE
0x01
滾動量單位爲行。 DOM_DELTA_PAGE
0x02
滾動量單位爲頁。
方法
該介面本身未定義方法,但繼承了父介面MouseEvent
、UIEvent
、Event
的方法。
規範
規範 | 狀態 | 註解 |
---|---|---|
Document Object Model (DOM) Level 3 Events Specification The definition of 'WheelEvent' in that specification. |
Obsolete | Initial definition. |
瀏覽器相容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
功能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
基本功能 | 31 | (Yes) | 17.0 (17.0) | 9.0 | 18 | 7.0 |
window.WheelEvent |
(Yes) | (Yes) | 17.0 (17.0) | 9.0 | (Yes) | (Yes) [1] |
WheelEvent + Ctrl 鍵[2]實現按住縮放功能 |
(Yes) | ? | 55.0 (55.0) | ? | ? | ? |
功能 | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
基本功能 | No support | (Yes) | (Yes) | 17.0 (17.0) | ? | (Yes) | No support | (Yes) |
window.WheelEvent |
No support | (Yes) | ? | 17.0 (17.0) | ? | (Yes) | ? | (Yes) |
WheelEvent + Ctrl 鍵[2]實現按住縮放功能 |
? | ? | ? | 55.0 (55.0) | ? | ? | ? | (Yes) |
[1] 嚴格說,Safari並非真正支援WheelEvent
,只不過會返回window.WheelEvent物件。
[2] 這樣在觸控平面上,比如觸控螢幕或是觸控板上,開發者就可根據用戶按住縮放手勢來實現簡單的縮放功能 (滑鼠滾輪 + Ctrl 習慣上用於縮放)。
參見
wheel
- 該介面取代的過時介面:
MouseScrollEvent
(Gecko內核瀏覽器)MouseWheelEvent
(非Gecko內核的瀏覽器)