WheelEvent

WheelEvent DOM事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。

該事件爲標準規定的事件介面。早期的瀏覽器實現過MouseWheelEvent (en-US)MouseScrollEvent (en-US)兩種滾輪事件介面,但這兩種介面皆非標準,加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。
注意事項: 請勿想當然依據滾輪方向(即該事件的各delta屬性值)來推斷文檔內容的滾動方向,因標準未定義滾輪事件具體會引發什麼樣的行爲,引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲,也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向,可在文檔內容滾動事件(scroll (en-US))中監視scrollLeft (en-US)scrollTop二值變化情況,即可推斷出滾動方向了。

建構式

WheelEvent() (en-US)
建立一個WheelEvent物件。

屬性

該介面繼承了父介面MouseEventUIEventEvent的屬性。

WheelEvent.deltaX (en-US) Read only
返回double值,該值表示滾輪的橫向滾動量。
WheelEvent.deltaY (en-US) Read only
返回double值,該值表示滾輪的縱向滾動量。
WheelEvent.deltaZ (en-US) Read only
返回double值,該值表示滾輪的z軸方向上的滾動量。
WheelEvent.deltaMode (en-US) Read only
返回unsigned long值,該值表示上述各delta的值的單位。該值及所表示的單位如下:
常數 描述
DOM_DELTA_PIXEL 0x00 滾動量單位爲像素。
DOM_DELTA_LINE 0x01 滾動量單位爲行。
DOM_DELTA_PAGE 0x02 滾動量單位爲頁。

方法

該介面本身未定義方法,但繼承了父介面MouseEventUIEventEvent的方法。

規範

規範 狀態 註解
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! (en-US)

功能 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 習慣上用於縮放)。

參見