TouchEvent

Интерфейс TouchEvent отражает событие, возникающее при изменении состояния контактов на чувствительных к прикосновениям поверхностях. Например, такими поверхностями могут быть тачскрины или трекпады. Событие может описывать одну или несколько точек контакта с экраном и включает поддержку обнаружения движения, добавление и удаление точек контакта и так далее.

Прикосновения представлены объектом Touch; каждое касание описывается позицией, размером, формой, величиной давления и целевым элементом. Список прикосновений представлен объектом TouchList.

Конструктор

TouchEvent()
Создает экземпляр TouchEvent.

Свойства

Данный интерфейс наследует свойства своих предков, UIEvent и Event.

TouchEvent.altKey Только для чтения
Логическое значение, показывающее, была ли нажата клавиша alt, когда событие касания было запущено.
TouchEvent.changedTouches Только для чтения
Список TouchList, включающий все объекты Touch, отражающие отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.
TouchEvent.ctrlKey Только для чтения
Логическое значение, показывающее, была ли нажата клавиша ctrl, когда событие касания было запущено.
TouchEvent.metaKey Только для чтения
Логическое значение, показывающее, была ли нажата мета клавиша, когда событие касания было запущено.
TouchEvent.shiftKey Только для чтения
Логическое значение, показывающее, была ли нажата клавиша shift, когда событие касания было запущено.
TouchEvent.targetTouchesТолько для чтения
Список TouchList, включающий все объекты Touch, отражающие текущие точки контакта с сенсорной поверхностью, которые находятся на одном и том же целевом элементе target.
TouchEvent.touches Только для чтения
Список TouchList, включающий все объекты Touch, отражающие все текущие точки контакта с поверхностью, вне зависимости от целевого элемента и статуса.

Типы событий касания

Существует несколько типов событий, которые можно инициировать, чтобы указать, что произошли изменения, связанные с касанием. Вы можете определить, какой тип события произошел, взглянув на свойство TouchEvent.type.

touchstart

Возникает, когда пользователь касается сенсорной поверхности. Целью target события будет являться экземпляр Element, на котором произошло касание.

touchend

Возникает, когда пользователь удаляет точку касания с поверхности (убирает палец или стилус с поверхности). Также это событие появляется, если точка касания уходит за границы поверхности, так, например, если палец пользователя съезжает за границу экрана.

Цель события - тот же экземпляр Element, что и для события touchstart с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

Точки касания, удаленные с поверхности, содержатся в списке TouchList, указанном в атрибуте changedTouches.

touchmove

Возникает, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр element, что и для события touchstart с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

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

Примечание: Промежуток времени, в течении которого возникают события touchmove, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.

touchcancel

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

  • Произошло какое-то событие, отменившее прикосновение; это может произойти, если во время взаимодействия появляется модальное окно.
  • Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого.
  • Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки Touch в списке TouchList будут отменены.

Использование addEventListener() и preventDefault()

Важно отметить, что во многих случаях появляются и события касания, и события мыши (чтобы код, неиспользующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать preventDefault() для предотвращения отправки событий мыши.

Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по-умолчанию для touchstart и touchmove равно true и вызовы метода preventDefault() не требуются. Чтобы переопределить такое поведение, просто установите значение опции passive равным false как показано в примере ниже. Это изменение запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем. Демонстрация этого доступна на сайте Google Developer.

GlobalEventHandlers

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

GlobalEventHandlers.ontouchstart
Обработчик global event handler для события touchstart.
GlobalEventHandlers.ontouchend
Обработчик global event handler для события touchend.
GlobalEventHandlers.ontouchmove
Обработчик global event handler для события touchmove.
GlobalEventHandlers.ontouchcancel
Обработчик global event handler для события touchcancel.

Пример

Смотрите пример в основной статье о событиях касания.

Спецификации

Спецификация Статус Комментарий
Touch Events – Level 2
Определение 'TouchEvent' в этой спецификации.
Черновик Добавлены глобальные атрибуты обработчиков ontouchstart, ontouchend, ontouchmove, ontouchend
Touch Events
Определение 'TouchEvent' в этой спецификации.
Рекомендация Начальное определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
TouchEventChrome Полная поддержка 22Edge Полная поддержка 79
Полная поддержка 79
Нет поддержки ≤18 — 79
Отключено
Отключено From version ≤18 until version 79 (exclusive): this feature is behind the Standards Preview preference (needs to be set to true).
Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
Замечания
Замечания Removed in bug 888304 due to web compatibility issues.
IE Нет поддержки НетOpera Полная поддержка 15Safari Нет поддержки НетWebView Android Полная поддержка ≤37Chrome Android Полная поддержка 25Firefox Android Полная поддержка 6Opera Android Полная поддержка 14Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 1.5
TouchEvent() constructorChrome Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Edge Полная поддержка ≤79
Замечания
Полная поддержка ≤79
Замечания
Замечания Edge only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Firefox ? IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Chrome Android Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания Chrome only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 5.0
Замечания
Полная поддержка 5.0
Замечания
Замечания Samsung Internet only supports the following touchEventInit properties: touches, targetTouches, changedTouches.
altKeyChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
changedTouchesChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
ctrlKeyChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
metaKeyChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
shiftKeyChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
targetTouchesChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
touchesChrome Полная поддержка 22Edge Полная поддержка ≤18Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 18 — 24
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также