Обработка touch-событий

Библиотека Cash предоставляет лёгкий и компактный способ работы с DOM, включая поддержку событий на сенсорных устройствах. Touch-события позволяют отслеживать действия пользователя на экранах с сенсорным вводом: касания, свайпы, жесты и многоточечные взаимодействия. Cash обеспечивает удобный интерфейс для их привязки и управления.

Основные touch-события

В JavaScript выделяют несколько стандартных событий для сенсорного ввода:

  • touchstart – возникает, когда палец прикасается к элементу.
  • touchmove – срабатывает при перемещении пальца по экрану.
  • touchend – срабатывает при снятии пальца с элемента.
  • touchcancel – возникает, если событие прерывается системой (например, входящий звонок на мобильном устройстве).
  • touchenter / touchleave / touchforcechange – менее распространённые события для сложных интерактивных сценариев.

Cash позволяет добавлять обработчики этих событий так же, как обычные DOM-события через метод .on().

$('.element').on('touchstart', function(event) {
    console.log('Начало касания', event);
});

$('.element').on('touchmove', function(event) {
    console.log('Движение пальца', event);
});

$('.element').on('touchend', function(event) {
    console.log('Окончание касания', event);
});

Ключевой момент: объект события event содержит массив touches с информацией обо всех текущих точках касания, массив changedTouches для точек, которые изменились, и targetTouches для точек на конкретном элементе.

Свойства touch-событий

  • touches – массив всех активных касаний на экране.
  • targetTouches – массив касаний, относящихся к конкретному элементу.
  • changedTouches – массив касаний, изменившихся в текущем событии.
  • identifier – уникальный идентификатор каждой точки касания.
  • clientX / clientY – координаты касания относительно области видимой части окна.
  • screenX / screenY – координаты касания относительно экрана.
  • pageX / pageY – координаты касания относительно документа, с учётом прокрутки.

Эти свойства позволяют отслеживать перемещения, вычислять расстояния и определять направления жестов.

Делегирование touch-событий

Cash поддерживает делегирование событий, что особенно полезно для динамически создаваемых элементов:

$(document).on('touchstart', '.dynamic-button', function(event) {
    console.log('Касание на динамическом элементе', event);
});

Делегирование снижает нагрузку на браузер и позволяет привязать обработчик к родительскому элементу вместо множества дочерних элементов.

Прерывание стандартного поведения

Touch-события по умолчанию могут вызывать скроллинг или масштабирование страницы. Для управления этим поведением можно использовать методы Cash и стандартные методы событий:

$('.element').on('touchmove', function(event) {
    event.preventDefault(); // предотвращает скроллинг
    console.log('Обработка свайпа без прокрутки');
});

Метод preventDefault() критически важен при реализации кастомных жестов, чтобы браузер не перехватывал действия пользователя.

Использование дел, свайпов и мультитач

Для обработки свайпов и мультитач важно отслеживать последовательность событий:

let startX = 0;
let startY = 0;

$('.swipe-area').on('touchstart', function(e) {
    const touch = e.touches[0];
    startX = touch.clientX;
    startY = touch.clientY;
});

$('.swipe-area').on('touchend', function(e) {
    const touch = e.changedTouches[0];
    const diffX = touch.clientX - startX;
    const diffY = touch.clientY - startY;

    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 30) {
        if (diffX > 0) {
            console.log('Свайп вправо');
        } else {
            console.log('Свайп влево');
        }
    }
});

Мультитач можно анализировать по массиву touches и идентификаторам identifier. Это позволяет реализовывать масштабирование двумя пальцами, повороты и другие сложные жесты.

Управление обработчиками

Cash поддерживает методы .off() и .one() для контроля обработчиков:

  • .off(event, handler) – удаляет конкретный обработчик.
  • .one(event, handler) – срабатывает один раз и автоматически удаляется.
$('.element')
    .one('touchstart', function() {
        console.log('Касание срабатывает один раз');
    })
    .on('touchend', function() {
        console.log('Обработка окончания касания');
    });

Рекомендации по производительности

  • Минимизировать количество обработчиков на множестве элементов. Делегирование через родительский контейнер предпочтительнее.
  • Ограничивать использование preventDefault() только там, где это действительно необходимо, чтобы не нарушать нативный скроллинг.
  • При обработке touchmove использовать throttle или requestAnimationFrame для уменьшения нагрузки на рендеринг.
let ticking = false;

$('.element').on('touchmove', function(e) {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            console.log('Throttled touchmove');
            ticking = false;
        });
        ticking = true;
    }
});

Совместимость и особенности

  • На iOS и Android touch-события работают по-разному: iOS иногда добавляет задержку в 300 мс при интерпретации двойного тапа.
  • На десктопе touch-события не генерируются, но Cash позволяет унифицировать обработку событий через .on('click touchstart', handler).
  • Некоторые мобильные браузеры поддерживают touchforcechange для измерения силы касания (Force Touch).

Интеграция с другими событиями

Touch-события можно комбинировать с pointer events или mouse events, чтобы создать универсальный обработчик для всех типов устройств:

$('.element').on('touchstart pointerdown mousedown', function(e) {
    console.log('Начало взаимодействия на любом устройстве', e);
});

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

Cash предоставляет лаконичный и мощный интерфейс для работы с сенсорными событиями, делая обработку touch-интеракций интуитивной, а код — компактным и управляемым.

Оглавление