TouchEvent

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

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

Конструктор

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

Свойства

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

TouchEvent.altKey Только для чтения
Булево значение, показывающее, была ли нажата клавиша alt, когда произошло событие касания.
TouchEvent.changedTouches Только для чтения
Список TouchList, со всеми объектами Touch, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.
TouchEvent.ctrlKey (en-US) Только для чтения
Булево значение, показывающее, была ли нажата клавиша ctrl, когда произошло событие касания
TouchEvent.metaKey (en-US) Только для чтения
Булево значение, показывающее, была ли нажата клавиша meta, когда произошло событие касания.
TouchEvent.shiftKey (en-US) Только для чтения
Булево значение, показывающее, была ли нажата клавиша shift, когда произошло событие касания.
TouchEvent.targetTouches (en-US)Только для чтения
Список TouchList со всеми объектами Touch, представляющими текущие точки касания с сенсорной поверхностью, которые находятся на одном и том же целевом элементе target.
TouchEvent.touches Только для чтения
Список TouchList со всеми объектами Touch, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.
TouchEvent.rotation Только для чтения
Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение 0.0
TouchEvent.scale Только для чтения
Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: 1.0

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

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

touchstart (en-US)

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

touchend (en-US)

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

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

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

touchmove (en-US)

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

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

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

touchcancel (en-US)

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

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

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

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

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

GlobalEventHandlers

Experimental

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

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

Пример

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

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

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

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

BCD tables only load in the browser

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