Touch events

Interact.js предоставляет мощный и гибкий API для обработки событий касаний (touch events) в веб-приложениях. Библиотека поддерживает множественные сенсорные точки, жесты и комбинированные события мыши и касания, что делает её идеальной для интерактивных интерфейсов на мобильных устройствах и планшетах.

Поддерживаемые события касания

Interact.js использует следующие ключевые события касания:

  • tap — короткое прикосновение к элементу.
  • doubletap — два последовательных прикосновения.
  • hold — долгий тап, удержание пальца на элементе.
  • drag — перетаскивание элемента одним или несколькими пальцами.
  • pinch — жест с двумя пальцами для масштабирования.
  • rotate — вращение элемента двумя пальцами.

Эти события могут быть привязаны к любому DOM-элементу с помощью метода interact(target).on(event, handler).

interact('.draggable')
  .on('tap', event => {
    console.log('Элемент был затронут');
  })
  .on('doubletap', event => {
    console.log('Двойное касание');
  });

Перетаскивание с использованием Touch

Interact.js объединяет мышиные и сенсорные события в единый API. Для обработки перетаскивания (drag):

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        console.log('Начало перетаскивания', event.touches);
      },
      move(event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      },
      end(event) {
        console.log('Окончание перетаскивания', event.touches);
      }
    },
    inertia: true
  });

Ключевой момент — использование event.touches, который содержит массив активных точек касания. Для мультитач-перетаскивания можно отслеживать каждую точку и обрабатывать её отдельно.

Масштабирование и вращение

Для поддержки мультитач-жестов Interact.js предоставляет gesturable:

interact('.gesture')
  .gesturable({
    listeners: {
      start(event) {
        console.log('Начало жеста');
      },
      move(event) {
        const target = event.target;

        let scale = (parseFloat(target.getAttribute('data-scale')) || 1) * (1 + event.ds);
        let angle = (parseFloat(target.getAttribute('data-angle')) || 0) + event.da;

        target.style.transform = `scale(${scale}) rotate(${angle}deg)`;
        target.setAttribute('data-scale', scale);
        target.setAttribute('data-angle', angle);
      },
      end(event) {
        console.log('Жест завершён');
      }
    }
  });

event.ds — изменение масштаба за текущий шаг жеста, event.da — изменение угла. Эти значения позволяют плавно и точно управлять элементами при мультитаче.

Настройка сенсорной чувствительности

Interact.js позволяет контролировать чувствительность касаний с помощью опций:

  • touchAction — определяет стратегию обработки жестов браузером ('none', 'pan-x', 'pan-y', 'manipulation').
  • inertia — добавляет эффект инерции при завершении перетаскивания.
  • maxPointers и minPointers — ограничивают количество одновременных точек касания для события.

Пример с ограничением двух пальцев для масштабирования:

interact('.pinchable')
  .gesturable({
    maxPointers: 2,
    minPointers: 2
  });

Комбинированное использование drag и gesturable

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

interact('.interactive')
  .draggable({ listeners: dragListeners })
  .gesturable({ listeners: gestureListeners })
  .on('tap', tapHandler)
  .on('doubletap', doubleTapHandler);

Interact.js автоматически обрабатывает конфликт между событиями касания, используя внутренние механизмы pointer capture, что позволяет плавно комбинировать мультитач-жесты с перетаскиванием.

Отслеживание всех активных точек касания

События drag, pinch и rotate предоставляют массив event.touches, где каждая точка имеет свойства:

  • identifier — уникальный ID пальца или стилуса.
  • clientX, clientY — координаты точки на экране.
  • pageX, pageY — координаты относительно страницы.

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

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

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

  • Использование CSS-свойства transform вместо top/left для перемещения.
  • Ограничение числа обрабатываемых touch-событий через maxPointers.
  • Отключение ненужных слушателей при неактивных элементах.

Interact.js минимизирует нагрузку, автоматически фильтруя лишние события и обрабатывая их через единый pointer API.

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

Touch-события Interact.js можно комбинировать с обычными событиями мыши и клавиатуры для комплексного управления интерфейсом. Например, drag может срабатывать и мышью, и пальцем, а gesturable — только мультитачем, сохраняя синхронизацию трансформаций элементов на странице.

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

Оглавление