Using Touch Events

Этот перевод не завершен. Пожалуйста, помогите перевести эту статью с английского

На данный момент большинство веб контента предназначено для ввода с использованием мыши и клавиатуры. Но вместе с тем устройства с сенсорными экранами (особенно портативные устройства, в том числе смартфоны) становятся по настоящему массовыми. Веб приложения могут обрабатывать событие касания , используя Touch Events. Частиным решением может быть правильное интерпретирование привычного события onclick (нажатие мыши), но при этом возникает ограничение одновременного количества нажатий в разных местах экрана, что  сильно ограничивает возможную область использования.

Событие начинается в момент касания пальца или стилуса поверхности. При этом до  момента прекращения касания или даже премещения в других местах так же могут обрабатываться веб приложением. Событие завершается в момент  исчезновения всех точек касания. Веб приложение может получить доступ к событиям касания,  перемещения и прекращения касания. Логика обработки полностью возлагается на веб приложение.

Интерфейсы

События touch включают три интерфейса: (Touch, TouchEvent и TouchList). Так же событие touch поддерживает следующие типы событий:

  • touchstart - срабатиывает  в момент касания.
  • touchmove - срабатиыает при перемещении.
  • touchend - срабатиывает в момент завершения касания (отжатие).
  • touchcancel -  срабатывает в  момент прерывания события (например, создано слишком много точек касания).

Интерфейс Touch представляет собой одну точку контакта на сенсорном устройстве. Точка контакта обычно называется точкой касания или просто касанием. Касание обычно производится пальцем или стилусом на сенсорном экране, ручке или трекпаде. Свойства точки касания включают в себя уникальный идентификатор (id), целевой элемент точки касания (target), а также координаты X и Y положения точки касания относительно области просмотра, страницы и экрана.

Интерфейс TouchList представляет массив точек контакта с сенсорной поверхностью. Таким образом, если пользователь активирует сенсорную поверхность одним пальцем, массив будет содержать один элемент, а если пользователь коснется поверхности тремя пальцами, длина массива будет равна трем.

Интерфейс TouchEvent представляет событие, отправляемое при изменении состояния контактов с сенсорной поверхностью. Изменения состояния включают начальный контакт с сенсорной поверхностью, перемещение точки касания при сохранении контакта с поверхностью, отпускание точки касания и отмену события касания. Атрибуты этого интерфейса включают состояние нескольких клавиш-модификаторов (например, клавиши Shift) и данных:

  • touches - массив из всех точек касания, находящихся в данный момент на экране.
  • targetTouches - массив точек касания на целевом элементе DOM.
  • changedTouches - массив точек касания, элементы которых зависят от типа связанного события:
    • Для события touchstart - массив точек касания, которые стали активными в момент касания.
    • Для события touchmove - массив точек касания, которые изменились со времени последнего события.
    • Для события touchend - массив точек касания, которые были удалены с поверхности (то есть набор точек касания, соответствующих пальцам, которые больше не касаются поверхности).

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

Обработка жестов

Для распознания приложением, какой именно жест был совершен, необходимо учитывать большое множество факторов. Например, расстояние, пройденное точкой касания от начального местоположения до точкой окончания. Другим потенциальным фактором может служить время: время перемещения, время между двумя однвоременными касаниями, предназначенными для создания жеста двойного касания. Направление пролистывания (например, справа налево или сверху вниз) так же необходимо учитывать

The touch list(s) an application uses depends on the semantics of the application's gestures. For example, if an application supports a single touch (tap) on one element, it would use the targetTouches list in the touchstart event handler to process the touch point in an application-specific manner. If an application supports two-finger swipe for any two touch points, it will use the changedTouches list in the touchmove event handler to determine if two touch points had moved and then implement the semantics of that gesture in an application-specific manner.

При одной активной точки касания, браузер обычно эмулриет событие зажатия левой клавиши мышки.
Для обработки же нескольких точек нажатия (две или более) используют событие касания. 
Для отмены эмулированных событий мышки, необходимо  использовать метод protectDefault () в обработчиках сенсорных событий. Для получения дополнительной информации о взаимодействии между событиями мыши и касания см. Поддержка TouchEvent и MouseEvent.

Основы

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

Зарегистрируйте обработчик событий для каждого типа сенсорного события.

// Регистрация touch event событий
someElement.addEventListener('touchstart', process_touchstart, false);
someElement.addEventListener('touchmove', process_touchmove, false);
someElement.addEventListener('touchcancel', process_touchcancel, false);
someElement.addEventListener('touchend', process_touchend, false);

Обработаем событие touchstart для управления приложением с использованием жестов

// обработка touchstart
function process_touchstart(ev) {
  // Use the event's data to call out to the appropriate gesture handlers
  switch (ev.touches.length) {
    case 1: handle_one_touch(ev); break;
    case 2: handle_two_touches(ev); break;
    case 3: handle_three_touches(ev); break;
    default: gesture_not_supported(ev); break;
  }
}

Доступ к атрибутам точки касания.

// Добавим вызов функции process_touchstart
someElement.addEventListener('touchstart', function(ev) {
  // Iterate through the touch points that were activated
  // for this element and process each event 'target'
  for (var i=0; i < ev.targetTouches.length; i++) {
    process_target(ev.targetTouches[i].target);
  }
}, false);

Отмена эмуляции события мышки

// touchmove handler
function process_touchmove(ev) {
  // Set call preventDefault()
  ev.preventDefault();
}

Лучшие практики

Вот несколько рекомендаций, которые следует учитывать при использовании сенсорных событий:

  • Minimize the amount of work that is done in the touch handlers.
  • Add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree).
  • Add touchmove, touchend and touchcancel event handlers within the touchstart.
  • The target touch element or node should be large enough to accommodate a finger touch. If the target area is too small, touching it could result in firing other events for adjacent elements.

Implementation and deployment status

The touch events browser compatibility data indicates touch event support among mobile browsers is relatively broad, with desktop browser support lagging although additional implementations are in progress.

Some new features regarding a touch point's touch area - the area of contact between the user and the touch surface - are in the process of being standardized. The new features include the X and Y radius of the ellipse that most closely circumscribes a touch point's contact area with the touch surface. The touch point's rotation angle - the number of degrees of rotation to apply to the described ellipse to align with the contact area - is also be standardized as is the amount of pressure applied to a touch point.

What about Pointer Events?

The introduction of new input mechanisms results in increased application complexity to handle various input events, such as key events, mouse events, pen/stylus events, and touch events. To help address this problem, the Pointer Events standard defines events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc.. That is, the abstract pointer creates a unified input model that can represent a contact point for a finger, pen/stylus or mouse.

The pointer event model can simplify an application's input processing since a pointer represents input from any input device. Additionally, the pointer event types are very similar to mouse event types (for example, pointerdown pointerup) thus code to handle pointer events closely matches mouse handling code.

The implementation status of pointer events in browsers is relatively low with IE11 and Edge having complete implementations. Firefox's implementation has been withdrawn because of баг 1166347.

Examples and demos

The following documents describe how to use touch events and include example code:

Touch event demonstrations:

Community