blob: e7446cc0444f147a15ea53e43da8f52599be7941 (
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
---
title: WheelEvent
slug: Web/API/WheelEvent
translation_of: Web/API/WheelEvent
---
<p>{{APIRef("DOM Events")}}</p>
<p>WheelEvent DOM事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。</p>
<div class="warning"><strong>該事件爲標準規定的事件介面。</strong>早期的瀏覽器實現過{{ domxref("MouseWheelEvent") }}和{{domxref("MouseScrollEvent")}}兩種滾輪事件介面，但這兩種介面皆非標準，加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。</div>
<div class="note"><strong>注意事項：</strong> 請勿想當然依據滾輪方向（即該事件的各delta屬性值）來推斷文檔內容的滾動方向，因標準未定義滾輪事件具體會引發什麼樣的行爲，引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲，也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向，可在文檔內容滾動事件（{{event("scroll")}}）中監視{{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>值，該值表示上述各delta的值的單位。該值及所表示的單位如下：
<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('DOM3 Events','#interface-wheelevent','WheelEvent')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>功能</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>基本功能</td>
<td>31</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{ CompatGeckoDesktop("17.0") }}</td>
<td>{{ CompatIE("9.0") }}</td>
<td>18</td>
<td>7.0</td>
</tr>
<tr>
<td><code>window.WheelEvent</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{ CompatGeckoDesktop("17.0") }}</td>
<td>{{ CompatIE("9.0") }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}} [1]</td>
</tr>
<tr>
<td><code>WheelEvent</code> + <kbd>Ctrl</kbd> 鍵<sup>[2]</sup>實現按住縮放功能</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop("55.0") }}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>功能</th>
<th>Android</th>
<th>Android Webview</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>基本功能</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("17.0") }}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>window.WheelEvent</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("17.0") }}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>WheelEvent</code> + <kbd>Ctrl</kbd> 鍵<sup>[2]</sup>實現按住縮放功能</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("55.0") }}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 嚴格說，Safari並非真正支援<code>WheelEvent</code>，只不過會返回window.WheelEvent物件。</p>
<p>[2] 這樣在觸控平面上，比如觸控螢幕或是觸控板上，開發者就可根據用戶按住縮放手勢來實現簡單的縮放功能 (滑鼠滾輪 + <kbd>Ctrl</kbd> 習慣上用於縮放)。</p>
<h2 id="參見">參見</h2>
<ul>
<li>{{ event("wheel") }}</li>
<li>該介面取代的過時介面：
<ul>
<li>{{ domxref("MouseScrollEvent") }}（Gecko內核瀏覽器）</li>
<li>{{ domxref("MouseWheelEvent") }}（非Gecko內核的瀏覽器）</li>
</ul>
</li>
</ul>
|
