---
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>

{{csssyntax}}

<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>