Touch события

Driver.js поддерживает работу с touch-событиями на мобильных и сенсорных устройствах, обеспечивая плавное взаимодействие с интерактивными элементами интерфейса. Touch-события позволяют пользователям перемещаться по шагам подсказок, не прибегая к кликам мыши, что особенно важно для адаптивного дизайна.

Типы touch-событий

Driver.js обрабатывает следующие основные touch-события:

  • touchstart — срабатывает при касании экрана. Используется для фиксации начальной позиции касания, определения активации элемента.
  • touchmove — фиксирует движение пальца по экрану. В Driver.js применяется для отслеживания попыток скроллинга или свайпа в пределах элемента подсказки.
  • touchend — фиксирует окончание касания. Важен для завершения шага подсказки и перехода к следующему.
  • touchcancel — возникает, когда касание прерывается системой (например, вызовом уведомления или системной панелью). Driver.js корректно обрабатывает такие ситуации, чтобы не нарушить последовательность шагов.

Настройка touch-навигации в Driver.js

Driver.js позволяет настраивать поведение touch-событий через объект конфигурации. Основные параметры:

const driver = new Driver({
  allowClose: false, // запрещает закрытие подсказки свайпом
  touchTolerance: 15, // чувствительность к смещению пальца (в пикселях)
  overlayClickNext: true // переход к следующему шагу при тапе по оверлею
});

allowClose предотвращает случайное закрытие подсказки при случайном касании. touchTolerance задает максимальное смещение пальца, после которого Driver.js решает, что касание — это попытка перемещения, а не тап. overlayClickNext позволяет пользователю продвигаться по шагам без точного нажатия на целевой элемент, что критично для маленьких экранов.

Обработка свайпов

Driver.js поддерживает свайпы для навигации между шагами. Логика работы:

  1. Определение направления — анализируется начальная и конечная координата касания.
  2. Сравнение с порогом — если смещение превышает touchTolerance, выполняется переход.
  3. Вызов callback’ов — можно подключить функции onNext, onPrevious для кастомной логики.

Пример подключения свайпа:

driver.on('touchmove', (event) => {
  const deltaX = event.changedTouches[0].clientX - startX;
  if (deltaX > 50) driver.moveNext();
  else if (deltaX < -50) driver.movePrevious();
});

Особенности взаимодействия с overlay и подсказкой

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

  • Касание оверлея может закрывать подсказку или переходить к следующему шагу.
  • Drag по оверлею не прерывает шаг, если смещение меньше touchTolerance.
  • Driver.js автоматически блокирует вертикальный скролл страницы, когда активен шаг, чтобы избежать конфликтов между свайпами и прокруткой.

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

Для расширенной функциональности можно использовать кастомные обработчики touch-событий:

driver.on('touchstart', (e) => {
  console.log('Начало касания:', e.target);
});

driver.on('touchend', (e) => {
  if (e.target.matches('.driver-step')) {
    console.log('Шаг завершён');
  }
});

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

Советы по оптимизации на мобильных устройствах

  • Устанавливать touchTolerance в зависимости от размера элемента и плотности пикселей.
  • Обеспечивать достаточный размер целевых зон, чтобы касания были точными.
  • Использовать overlayClickNext для ускоренной навигации на маленьких экранах.
  • Тестировать все шаги на разных устройствах, учитывая особенности тачскринов с высокой чувствительностью.

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

Оглавление