TouchEvent

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

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

Конструктор

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

Свойства

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

TouchEvent.altKey Только для чтения

Булево значение, показывающее, была ли нажата клавиша

alt

, когда произошло событие касания.

TouchEvent.changedTouches Только для чтения

Список TouchList, со всеми объектами Touch, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.

TouchEvent.ctrlKey Только для чтения

Булево значение, показывающее, была ли нажата клавиша

ctrl

, когда произошло событие касания

TouchEvent.metaKey Только для чтения

Булево значение, показывающее, была ли нажата клавиша

meta

, когда произошло событие касания.

TouchEvent.shiftKey Только для чтения

Булево значение, показывающее, была ли нажата клавиша

shift

, когда произошло событие касания.

TouchEvent.targetTouchesТолько для чтения

Список TouchList со всеми объектами Touch, представляющими текущие точки касания с сенсорной поверхностью, которые находятся на одном и том же целевом элементе target.

TouchEvent.touches Только для чтения

Список TouchList со всеми объектами Touch, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.

TouchEvent.rotation Не стандартно Только для чтения

Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение 0.0

TouchEvent.scale Не стандартно Только для чтения

Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: 1.0

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

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

`touchstart`

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

`touchend`

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

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

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

`touchmove`

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

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

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

`touchcancel`

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

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

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

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

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

GlobalEventHandlers

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

GlobalEventHandlers.ontouchstart Экспериментальная возможность: Обработчик global event handler для события ~~unsupported templ: event~~.
GlobalEventHandlers.ontouchend Экспериментальная возможность: Обработчик global event handler для события ~~unsupported templ: event~~.
GlobalEventHandlers.ontouchmove Экспериментальная возможность: Обработчик global event handler для события ~~unsupported templ: event~~.
GlobalEventHandlers.ontouchcancel Экспериментальная возможность: Обработчик global event handler для события ~~unsupported templ: event~~.

Пример

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

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

Specification
Touch Events # touchevent-interface

Совместимость с браузерами

BCD tables only load in the browser