blob: 6cd9881b2eb67d02c7f34d55f26a2048612b8e09 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: WheelEvent
slug: Web/API/WheelEvent
tags:
- API
- DOM
- Reference
- WheelEvent
- 接口
translation_of: Web/API/WheelEvent
---
<p>{{APIRef("DOM Events")}}</p>
<p><code><strong>WheelEvent</strong></code> 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。</p>
<div class="warning"><strong>重要：该事件为标准规定的滚轮事件接口。</strong>早期的浏览器实现过{{ domxref("MouseWheelEvent") }}和{{domxref("MouseScrollEvent")}}两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。</div>
<div class="note"><strong>不要混淆 <code>wheel</code> 事件和 {{event("scroll")}} 事件：</strong>{{event("wheel")}} 事件的默认动作取决于浏览器实现。因此 <code>wheel</code> 事件不一定会触发 {{event("scroll")}} 事件。即便滚轮事件引发了文档内容的滚动行为，也不表示 <code>wheel</code> 事件中的 <code>delta*</code> 值恰好反映文档内容的滚动方向。因此，不要依赖 <code>delta*</code> 属性获知文档内容的滚动方向。可在文档内容滚动事件（{{event("scroll")}}）中监视target的{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}的变化以推断滚动方向。</div>
<p>{{InheritanceDiagram}}</p>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
<dd>创建一个<code>WheelEvent</code>对象。</dd>
</dl>
<h2 id="属性">属性</h2>
<p><em>该接口继承了父接口{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的属性。</em></p>
<dl id="raw_prop">
<dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
<dd>返回<code>double</code>值，该值表示滚轮的横向滚动量。</dd>
<dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
<dd>返回<code>double</code>值，该值表示滚轮的纵向滚动量。</dd>
<dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
<dd>返回<code>double</code>值，该值表示滚轮的z轴方向上的滚动量。</dd>
<dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
<dd>返回<code>unsigned long</code>值，该值表示上述各<code>delta*</code>的值的单位。该值及所表示的单位如下：
<table class="standard-table">
<tbody>
<tr>
<td class="header">常量</td>
<td class="header">值</td>
<td class="header">描述</td>
</tr>
<tr>
<td><code>DOM_DELTA_PIXEL</code></td>
<td><code>0x00</code></td>
<td>滚动量单位为像素。</td>
</tr>
<tr>
<td><code>DOM_DELTA_LINE</code></td>
<td><code>0x01</code></td>
<td>滚动量单位为行。</td>
</tr>
<tr>
<td><code>DOM_DELTA_PAGE</code></td>
<td><code>0x02</code></td>
<td>滚动量单位为页。</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>该接口本身未定义方法，但继承了父接口{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的方法。</em></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{SpecName("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}}</td>
<td>{{Spec2("UI Events")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events','#interface-wheelevent','WheelEvent')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.WheelEvent")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{ event("wheel") }} 事件</li>
<li>该接口取代的过时接口：
<ul>
<li>{{ domxref("MouseScrollEvent") }}（Gecko内核浏览器）</li>
<li>{{ domxref("MouseWheelEvent") }}（非Gecko内核的浏览器）</li>
</ul>
</li>
</ul>
|
