Как event используется в обработке касаний и что он содержит?

В веб-разработке для мобильных устройств и планшетов стандартные события мыши (click, mousedown) недостаточно хорошо подходят для обработки мультитач-жестов. Для этой цели в JavaScript существует специальный тип событий — TouchEvent. Он генерируется при начале, движении и окончании касания сенсорного экрана.

Содержимое объекта TouchEvent

Ключевое свойство TouchEvent — это три списка объектов Touch:

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

Объект Touch

Каждый объект в этих списках представляет одно касание пальцем и содержит важные данные:

• identifier: уникальный числовой ID для отслеживания конкретного пальца на протяжении всего жеста.
• target: DOM-элемент, на котором началось касание.
• clientX / clientY: координаты касания относительно окна браузера (viewport).
• pageX / pageY: координаты относительно всего документа.
• screenX / screenY: координаты относительно экрана устройства.
• radiusX / radiusY: примерные размеры области касания (например, для определения силы нажатия).

Типы событий и практическое применение

Основные типы событий касаний:

• touchstart: палец коснулся экрана.
• touchmove: палец перемещается по экрану.
• touchend: палец оторвался от экрана.
• touchcancel: касание было прервано системой (например, входящий звонок).

Эти события используются для реализации жестов: свайп для навигации, pinch-to-zoom для масштабирования изображений, перетаскивания элементов интерфейса.

Пример кода

Простой пример отслеживания одного касания для перетаскивания элемента:

let draggable = document.getElementById('box');
let startX, startY, initialX, initialY;

// Обработка начала касания
draggable.addEventListener('touchstart', function(event) {
  // Предотвращаем прокрутку страницы
  event.preventDefault();
  // Берем первое касание из списка
  let touch = event.touches[0];
  // Запоминаем начальные координаты касания и элемента
  startX = touch.clientX;
  startY = touch.clientY;
  initialX = draggable.offsetLeft;
  initialY = draggable.offsetTop;
});

// Обработка движения пальца
draggable.addEventListener('touchmove', function(event) {
  event.preventDefault();
  let touch = event.touches[0];
  // Вычисляем смещение
  let deltaX = touch.clientX - startX;
  let deltaY = touch.clientY - startY;
  // Применяем новую позицию к элементу
  draggable.style.left = (initialX + deltaX) + 'px';
  draggable.style.top = (initialY + deltaY) + 'px';
});

Вывод: Объект TouchEvent и его содержимое являются фундаментом для создания отзывчивых и интуитивных сенсорных интерфейсов в мобильных веб-приложениях. Его стоит применять всегда, когда требуется точный контроль над мультитач-взаимодействиями, которые нельзя реализовать через события мыши или стандартные CSS-свойства вроде touch-action.