Tap - касание

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

Событие tap не требует использования стандартного DOM-события click, так как оно учитывает особенности сенсорных экранов, включая многоточечное касание и длительное удержание.

interact('.tap-target')
  .on('tap', function (event) {
    console.log('Элемент был нажат', event);
  });

Здесь .tap-target — это селектор элемента, к которому применяется обработка касания. Объект event содержит всю информацию о событии, включая координаты касания и целевой элемент.

Настройка параметров Tap

Interact.js позволяет тонко настраивать поведение касания через объект pointerEvents и конфигурацию interactable. Основные опции для tap:

maxInterval — максимальное время (в миллисекундах) между нажатием и отпусканием пальца, чтобы событие считалось тапом.
maxDistance — максимальное расстояние (в пикселях), которое палец может переместиться, чтобы событие считалось тапом.
tapHold — если включено, событие срабатывает при удержании пальца на элементе заданное время.

Пример с настройкой:

interact('.tap-target')
  .tap({
    maxInterval: 300,
    maxDistance: 10,
    tapHold: true
  })
  .on('tap', function (event) {
    console.log('Событие tap сработало', event);
  });

Здесь maxInterval: 300 гарантирует, что тап сработает только при быстром нажатии, а maxDistance: 10 исключает случайное срабатывание при скролле.

Обработка множественных тапов

Interact.js поддерживает double tap и последовательные нажатия. Для этого используется параметр maxDelay и проверка количества тапов.

let tapCount = 0;

interact('.tap-target')
  .on('tap', function (event) {
    tapCount++;
    if (tapCount === 2) {
      console.log('Двойное касание');
      tapCount = 0;
    }
    setTimeout(() => tapCount = 0, 400);
  });

maxDelay регулирует интервал между последовательными нажатиями.
Использование setTimeout позволяет сбрасывать счетчик, если второй тап не произошел вовремя.

Интеграция Tap с другими действиями

Взаимодействие tap удобно сочетать с drag, resize и другими модулями Interact.js. Основное правило — tap не блокирует другие события, если правильно настроен ignoreFrom и allowFrom.

interact('.tap-target')
  .draggable({
    onmove: function (event) {
      event.target.style.transform =
        `translate(${event.dx}px, ${event.dy}px)`;
    }
  })
  .tap({ maxDistance: 5 })
  .on('tap', function (event) {
    console.log('Тап на draggable элементе');
  });

ignoreFrom исключает элементы внутри таргета из обработки тапа.
allowFrom разрешает тап только по конкретным вложенным элементам.

interact('.tap-target')
  .tap({ allowFrom: '.button' })
  .on('tap', event => console.log('Только кнопка внутри элемента'));

Доступ к координатам касания

Событие tap содержит подробные данные о положении касания:

event.pageX и event.pageY — координаты относительно страницы.
event.clientX и event.clientY — координаты относительно окна браузера.
event.target — элемент, на котором произошло касание.

interact('.tap-target')
  .on('tap', function (event) {
    console.log(`Координаты: ${event.pageX}, ${event.pageY}`);
    console.log('Целевой элемент:', event.target);
  });

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

Событие TapHold

Иногда необходимо различать короткий тап и длительное удержание пальца. Interact.js предлагает событие tapHold:

interact('.tap-target')
  .on('tapHold', function (event) {
    console.log('Длительное касание', event);
  });

Время удержания задается через holdDuration (по умолчанию 600 мс).
Совместимо с обычным tap, события различаются по длительности.

interact('.tap-target')
  .tap({ tapHold: true, holdDuration: 800 })
  .on('tapHold', event => console.log('Держим 800 мс'));

Особенности на мобильных устройствах

tap корректно обрабатывает мультитач на сенсорных экранах.
Учитывает небольшие движения пальца, чтобы избежать случайного срабатывания при скролле.
Работает в сочетании с другими событиями Interact.js без конфликта с native touchstart/touchend.

interact('.tap-target')
  .on('tap', event => console.log('Мобильный тап'))
  .on('doubletap', event => console.log('Двойное касание на мобильном'));