Различия между mouse и touch

Interact.js предоставляет унифицированный интерфейс для обработки событий перетаскивания, масштабирования и жестов, поддерживая как мышь, так и сенсорные устройства. Однако, несмотря на высокоуровневую абстракцию, существует ряд важных различий в поведении событий mouse и touch, которые напрямую влияют на реализацию интерактивных интерфейсов.

1. Типы событий

Mouse события включают:

  • mousedown — нажатие кнопки мыши.
  • mousemove — перемещение мыши при удерживаемой кнопке.
  • mouseup — отпускание кнопки мыши.
  • click и dblclick — одиночное и двойное нажатие.

Touch события включают:

  • touchstart — начало касания пальцем.
  • touchmove — движение пальца по экрану.
  • touchend — завершение касания.
  • touchcancel — отмена касания системой или браузером.

Особенность: в touch событиях может участвовать несколько точек касания одновременно (multi-touch), что важно для жестов масштабирования и вращения.

2. Координаты и система отсчета

Mouse события возвращают координаты относительно документа (clientX, clientY, pageX, pageY) и всегда имеют одну точку взаимодействия.

Touch события содержат массив touches, targetTouches и changedTouches, каждая из которых имеет собственные координаты. Для обработки multi-touch необходимо использовать эти коллекции.

Пример:

interact(element).draggable({
  listeners: {
    move(event) {
      let x = event.clientX; // для мыши
      // для touch:
      if(event.touches) {
        x = event.touches[0].clientX;
      }
    }
  }
});

3. Обработка многоточечных жестов

Mouse ограничен одной точкой, поэтому жесты типа pinch или rotate не применимы напрямую.

Touch позволяет работать с несколькими точками касания:

  • event.touches.length — количество активных пальцев.
  • event.scale — коэффициент масштабирования (если используется gesture).
  • event.rotation — угол вращения между двумя пальцами.

Interact.js абстрагирует жесты через модуль gesturable:

interact(element).gesturable({
  listeners: {
    move(event) {
      element.style.transform =
        `scale(${event.scale}) rotate(${event.rotation}deg)`;
    }
  }
});

4. Задержки и “touch-action”

В touch событиях браузеры накладывают задержку для определения клика (обычно 300 мс). Это может создавать эффект «торможения» при drag & drop. Для устранения используется CSS свойство:

element {
  touch-action: none;
}

touch-action: none отключает стандартное поведение браузера (скролл, масштабирование) для элемента, позволяя Interact.js обрабатывать все события самостоятельно. Для мыши это свойство не оказывает влияния.

5. Совместимость и fallback

Interact.js автоматически использует mouse fallback на устройствах без сенсорного экрана, но важно учитывать:

  • На сенсорных экранах одно касание может сгенерировать и mouse события, что приводит к дублированию событий.
  • Для предотвращения дублирования можно использовать preventDefault() в touch-событиях или проверять pointerType:
interact(element).draggable({
  listeners: {
    start(event) {
      if(event.pointerType === 'mouse') {
        // обработка мыши
      } else if(event.pointerType === 'touch') {
        // обработка touch
      }
    }
  }
});

6. События pointer vs mouse/touch

Interact.js поддерживает Pointer Events API, объединяющий mouse и touch события через pointerdown, pointermove, pointerup. Преимущества:

  • Единая точка обработки событий.
  • Поддержка multi-touch через pointerId.
  • Упрощение логики drag & drop и gesturable.

При использовании pointer events различие между mouse и touch скрывается, но все тонкости координат и multi-touch остаются актуальными для жестов.

7. Практические рекомендации

  • Для drag & drop на мобильных устройствах всегда использовать touch-action: none.
  • Для multi-touch использовать gesturable и проверять количество касаний.
  • Для предотвращения дублирования на сенсорных устройствах учитывать pointerType или использовать pointer events.
  • Для сложных интерактивных интерфейсов комбинировать draggable, resizable и gesturable, различая обработку по типу устройства.

Различия между mouse и touch требуют внимательного подхода при разработке интерактивных элементов. Понимание особенностей событий и их координатной системы позволяет создавать плавный и предсказуемый пользовательский опыт на всех устройствах.

Оглавление