Интерфейс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 с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

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

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 Overview
• GestureEvent
• MSGestureEvent