---
title: TouchEvent
slug: Web/API/TouchEvent
tags:
  - API
  - DOM
  - Interface
  - NeedsTranslation
  - Reference
  - TopicStub
  - touch
translation_of: Web/API/TouchEvent
---
<p>{{ APIRef("Touch Events") }}</p>

<p>Интерфейс <strong><code>TouchEvent</code></strong> отражает событие {{domxref("UIEvent")}}, возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.</p>

<p>Каждое прикосновение представлено объектом {{ domxref("Touch") }}, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом {{ domxref("TouchList") }}.</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Конструктор">Конструктор</h2>

<dl>
 <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
 <dd>Создаёт экземпляр <code>TouchEvent</code>.</dd>
</dl>

<h2 id="Свойства">Свойства</h2>

<p><em>Данный интерфейс наследует свойства своих предков, {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>

<dl>
 <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
 <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>alt</kbd>, когда произошло событие касания.</dd>
 <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
 <dd>Список {{ domxref("TouchList") }}, со всеми объектами {{ domxref("Touch") }}, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.</dd>
 <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
 <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>ctrl</kbd>, когда произошло событие касания</dd>
 <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
 <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>meta</kbd>, когда произошло событие касания.</dd>
 <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
 <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>shift</kbd>, когда произошло событие касания.</dd>
 <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
 <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими <span class="tlid-translation translation" lang="ru"><span title="">текущие точки касания с сенсорной поверхностью,</span></span> которые находятся на одном и том же целевом элементе target.</dd>
 <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
 <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.</dd>
 <dt>{{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
 <dd>Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение <code>0.0</code></dd>
 <dt>{{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
 <dd>Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: <code>1.0</code></dd>
</dl>

<h2 id="Типы_событий_касания">Типы событий касания</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Существует несколько типов событий, которые могут происходить в ответ на касания</span></span>. О<span class="tlid-translation translation" lang="ru"><span title="">пределить, какое именно событие произошло, можно с помощью свойства </span></span>{{ domxref("event.type", "TouchEvent.type") }}.</p>

<h3 id="domxrefElementtouchstart_event_touchstart">{{domxref("Element/touchstart_event", "touchstart")}}</h3>

<p>Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр {{ domxref("Element") }}, которого коснулись.</p>

<h3 id="domxrefElementtouchend_event_touchend">{{domxref("Element/touchend_event", "touchend")}}</h3>

<p>Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.</p>

<p>Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>

<p>Точки касания, удалённые с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p>

<h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3>

<p>Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр {{ domxref("element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>

<p>Это событие также возникает, если изменилось значение радиуса, угла вращения или силы нажатия в точке касания.</p>

<div class="note"><strong>Примечание:</strong> Промежуток времени, в течении которого возникают события <code>touchmove</code>, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.</div>

<h3 id="touchcancel_event" name="touchcancel_event">{{domxref("Element/touchcancel_event", "touchcancel")}}</h3>

<p>Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):</p>

<ul>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Произошло какое-то событие, отменившее прикосновение;</span> <span title="">это может произойти, если во время взаимодействия появляется модальное окно</span></span>.</li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого</span></span>.</li>
 <li>Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки {{ domxref("Touch") }} в списке {{ domxref("TouchList") }} будут отменены.</li>
</ul>

<h3 id="Использование_addEventListener_и_preventDefault">Использование addEventListener() и preventDefault()</h3>

<p>Важно отметить, что во многих случаях происходят и события касаний, и события мыши (чтобы код, не использующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать {{domxref("Event.preventDefault","preventDefault()")}} для предотвращения отправки событий мыши.</p>

<p>Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code> и вызовы метода {{domxref("Event.preventDefault","preventDefault()")}} не требуются. Чтобы переопределить такое поведение, просто установите значение опции <code>passive</code> равным <code>false</code> как показано в примере ниже. Это изменение <span class="tlid-translation translation" lang="ru"><span title="">запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем</span></span>. Демонстрация этого доступна на сайте <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a>.</p>

<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>

<p>{{SeeCompatTable}}</p>

<dl>
 <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
 <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchstart")}}.</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
 <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchend")}}.</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
 <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchmove")}}.</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
 <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchcancel")}}.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<p>Смотрите <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">пример в основной статье о событиях касания</a>.</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('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
   <td>{{Spec2('Touch Events 2')}}</td>
   <td>Добавлены глобальные атрибуты обработчиков <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code></td>
  </tr>
  <tr>
   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
   <td>{{Spec2('Touch Events')}}</td>
   <td>Начальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{Compat("api.TouchEvent")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
 <li>{{domxref("GestureEvent")}}</li>
 <li>{{domxref("MSGestureEvent")}}</li>
</ul>