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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
---
title: touch-action
slug: Web/CSS/touch-action
translation_of: Web/CSS/touch-action
---
<div>{{CSSRef}}</div>
<p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p>
<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;
/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
</pre>
<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнет обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p>
<p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p>
<h2 id="Syntax">Syntax</h2>
<p>The <code>touch-action</code> property may be specified as either:</p>
<ul>
<li>any one of the keywords <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code>, <em>or</em></li>
<li>one of the keywords <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, plus optionally the keyword <code><a href="#">pinch-zoom</a></code>.</li>
</ul>
<h3 id="Values">Values</h3>
<dl>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd>Enable browser handling of all panning and zooming gestures.</dd>
<dt><a id="none" name="none"><code>none</code></a></dt>
<dd>Disable browser handling of all panning and zooming gestures.</dd>
<dt><a id="pan-x" name="pan-x"><code>pan-x</code></a></dt>
<dd>Enable single-finger horizontal panning gestures. May be combined with <strong>pan-y, pan-up,</strong> <strong>pan-down </strong>and/or <strong>pinch-zoom</strong>.</dd>
<dt><a id="pan-y" name="pan-y"><code>pan-y</code></a></dt>
<dd>Enable single-finger vertical panning gestures. May be combined with <strong>pan-x, pan-left, </strong><strong>pan-right</strong> and/or <strong>pinch-zoom</strong>.</dd>
<dt><a id="manipulation" name="manipulation"><code>manipulation</code></a></dt>
<dd>Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of <strong>click</strong> events when the user taps the screen. This is an alias for "<strong>pan-x pan-y pinch-zoom</strong>" (which, for compatibility, is itself still valid).</dd>
</dl>
<dl>
<dt><a id="pan-keywords" name="pan-keywords"><code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> {{experimental_inline}}</a></dt>
<dd>Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (<strong>pan-up</strong>) means that the user is dragging their finger downward on the screen surface, and likewise <strong>pan-left</strong> means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, <strong>"</strong><strong>pan-left pan-right</strong>" is invalid since "<strong>pan-x</strong>" is simpler, but "<strong>pan-left pan-down</strong>" is valid).</dd>
<dt><a id="pinch-zoom" name="pinch-zoom"><code>pinch-zoom</code></a></dt>
<dd>Enable multi-finger panning and zooming of the page. This may be combined with any of the <strong>pan-</strong> values.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p>
<pre class="brush: css notranslate">#map {
touch-action: none;
}
</pre>
<p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p>
<pre class="brush: css notranslate">.image-carousel {
width: 100%;
height: 150px;
touch-action: pan-y pinch-zoom;
}
</pre>
<p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p>
<pre class="brush: css notranslate">html {
touch-action: manipulation;
}
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
<td>{{Spec2('Compat')}}</td>
<td>Added <code>pinch-zoom</code> property value.</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td>
<td>{{Spec2('Pointer Events 2')}}</td>
<td>Added <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> property values.</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
<td>{{Spec2('Pointer Events')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(36.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
<td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
11.0</td>
<td>{{CompatOpera(23)}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
</tr>
<tr>
<td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
<td>{{CompatChrome(55.0)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[5]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOpera(42)}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
</tr>
<tr>
<td><code>pinch-zoom</code></td>
<td>{{CompatChrome(56.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}<sup>[5]</sup></td>
<td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
11.0</td>
<td>{{CompatOpera(43)}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(36.0)}}</td>
<td>{{CompatChrome(36.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.1 [3]</td>
</tr>
<tr>
<td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
<td>{{CompatChrome(55.0)}}</td>
<td>{{CompatChrome(55.0)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[5]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOperaMobile(42)}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>pinch-zoom</code></td>
<td>{{CompatChrome(56.0)}}</td>
<td>{{CompatChrome(56.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}<sup>[5]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOperaMobile(43)}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] This property (Level 1 keywords only) is implemented since Firefox 29, but is hidden behind the <code>layout.css.touch_action.enabled</code> preference. Starting in Firefox Nightly 50, it is enabled by default when running in nightly builds only. It is currently on track to be released in Firefox 52, see {{bug(1244402)}}.</p>
<p>[2] IE10+ additionally supports the non-standard values <a href="https://msdn.microsoft.com/zh-cn/library/windows/apps/hh767313.aspx">pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y</a>.</p>
<p>[3] <a href="https://bugs.webkit.org/show_bug.cgi?id=149854">Only supports the manipulation and auto values in iOS</a>.</p>
<p>[4] See {{webkitbug("133112")}}.</p>
<p>[5] See {{bug(1285685)}}.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("Pointer_events","Pointer Events")}}</li>
<li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li>
</ul>
|
