WheelEvent - Web API 接口参考编辑

WheelEvent 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。

重要：该事件为标准规定的滚轮事件接口。早期的浏览器实现过MouseWheelEvent和MouseScrollEvent两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。 不要混淆 wheel 事件和 scroll 事件：wheel 事件的默认动作取决于浏览器实现。因此 wheel 事件不一定会触发 scroll 事件。即便滚轮事件引发了文档内容的滚动行为，也不表示 wheel 事件中的 delta* 值恰好反映文档内容的滚动方向。因此，不要依赖 delta* 属性获知文档内容的滚动方向。可在文档内容滚动事件（scroll）中监视target的scrollLeft和scrollTop的变化以推断滚动方向。

  <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="https://developer.mozilla.org/wiki/zh-CN/docs/Web/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="https://developer.mozilla.org/wiki/zh-CN/docs/Web/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="https://developer.mozilla.org/wiki/zh-CN/docs/Web/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="/wiki/zh-CN/docs/Web/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、Event的属性。

WheelEvent.deltaX 只读

返回double值，该值表示滚轮的横向滚动量。

WheelEvent.deltaY 只读

返回double值，该值表示滚轮的纵向滚动量。

WheelEvent.deltaZ 只读

返回double值，该值表示滚轮的z轴方向上的滚动量。

WheelEvent.deltaMode 只读

返回unsigned long值，该值表示上述各delta*的值的单位。该值及所表示的单位如下：

常量	值	描述
`DOM_DELTA_PIXEL`	`0x00`	滚动量单位为像素。
`DOM_DELTA_LINE`	`0x01`	滚动量单位为行。
`DOM_DELTA_PAGE`	`0x02`	滚动量单位为页。