WheelEvent
interface represents events that occur due to the user moving a mouse wheel or similar input device.
Important: This is the standard wheel event interface to use.
Old versions of browsers implemented the non-standard and non-cross-browser-compatible
MouseWheelEvent
and
MouseScrollEvent
interfaces. Use this interface and avoid the non-standard ones.
不要混淆
wheel
event with the
scroll
event:
The default action of a
wheel
event is implementation-defined. Thus, a
wheel
event doesn't necessarily dispatch a
scroll
event. Even when it does, that doesn't mean that the
delta*
values in the
wheel
event necessarily reflect the content's scrolling direction. Therefore, do not rely on
delta*
properties to get the content's scrolling direction. Instead, detect value changes to
scrollLeft
and
scrollTop
of the target in the
scroll
事件。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/MouseEvent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MouseEvent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#D4DDE4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/WheelEvent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">WheelEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
WheelEvent()
WheelEvent
对象。
此接口从其祖先继承特性，
MouseEvent
,
UIEvent
，和
事件
.
WheelEvent.deltaX
只读
double
representing the horizontal scroll amount.
WheelEvent.deltaY
只读
double
representing the vertical scroll amount.
WheelEvent.deltaZ
只读
double
representing the scroll amount for the z-axis.
WheelEvent.deltaMode
只读
unsigned long
representing the unit of the
delta*
values' scroll amount. Permitted values are:
| 常量 | 值 | 描述 |
WheelEvent.DOM_DELTA_PIXEL
|
0x00
|
delta*
values are specified in pixels.
|
WheelEvent.DOM_DELTA_LINE
|
0x01
|
delta*
values are specified in lines.
|
WheelEvent.DOM_DELTA_PAGE
|
0x02
|
delta*
values are specified in pages.
|
此接口未定义任何特定方法，但从其祖先继承方法，
MouseEvent
,
UIEvent
，和
事件
.
| 规范 | 状态 | 注释 |
|---|---|---|
|
UI Events
定义为 '
WheelEvent
接口' 在该规范中。
|
工作草案 | |
|
DOM (文档对象模型) 3 级事件规范
在该规范中的 WheelEvent 定义。 |
过时 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WheelEvent
|
Chrome 31 | Edge 12 | Firefox 17 | IE 9 | Opera 18 | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
WheelEvent()
构造函数
|
Chrome Yes | Edge ≤18 | Firefox 17 | IE No | Opera Yes | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
deltaMode
|
Chrome 31 | Edge 12 | Firefox 17 | IE 9 | Opera 18 | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
deltaX
|
Chrome 31 | Edge 12 | Firefox 17 |
IE
9
|
Opera 18 | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
deltaY
|
Chrome 31 | Edge 12 | Firefox 17 |
IE
9
|
Opera 18 | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
deltaZ
|
Chrome 31 | Edge 12 | Firefox 17 |
IE
9
|
Opera 18 | Safari 6.1 | WebView Android Yes | Chrome Android Yes | Firefox Android 17 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
Pinch-to-zoom maps to
WheelEvent
+
ctrl
key.
|
Chrome 31 | Edge ≤79 | Firefox 55 | IE ? | Opera ? | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 55 | Opera Android ? | Safari iOS No | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
见实现注意事项。
wheel
event
MouseScrollEvent
MouseWheelEvent