Touch-события

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

События касания и их назначение

В JavaScript существуют основные события для сенсорного ввода:

  • touchstart – срабатывает при начале касания экрана.
  • touchmove – фиксирует движение пальца по экрану.
  • touchend – срабатывает после окончания касания.
  • touchcancel – фиксирует прерывание взаимодействия (например, из-за системного уведомления).

В контексте Shepherd.js эти события используются для навигации по шагам тура. Например, можно инициировать переход к следующему шагу при свайпе вправо или закрыть текущий шаг при свайпе вниз.

Настройка Shepherd.js для работы с Touch

По умолчанию Shepherd.js реагирует на события клика на кнопки next, back и cancel. Чтобы обеспечить корректное взаимодействие на мобильных устройствах, необходимо:

  1. Включить поддержку focus management, чтобы элементы тура получали правильный фокус при тач-взаимодействии:
const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    cancelIcon: { enabled: true }
  }
});
  1. Настроить кастомные обработчики для touch-событий:
const nextButton = document.querySelector('.shepherd-button-next');

nextButton.addEventListener('touchstart', (e) => {
  e.preventDefault();
  tour.next();
});

Здесь e.preventDefault() предотвращает стандартное поведение браузера, такое как скролл или выделение текста, что обеспечивает плавное переключение шагов тура.

Использование Gesture-библиотек

Для сложных сценариев тач-взаимодействия часто применяют сторонние библиотеки распознавания жестов, такие как Hammer.js. Она позволяет отслеживать свайпы, двойные касания и длинные удержания. Интеграция с Shepherd.js выглядит следующим образом:

const hammer = new Hammer(document.body);

hammer.on('swipeleft', () => tour.next());
hammer.on('swiperight', () => tour.back());
hammer.on('swipedown', () => tour.cancel());

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

Настройка интерактивности шагов

Каждый шаг Shepherd.js можно конфигурировать отдельно для мобильных устройств. Основные параметры:

  • attachTo – элемент, к которому привязан шаг.
  • buttons – массив кнопок с возможностью добавления touchstart обработчиков.
  • canClickTarget – определяет, разрешено ли пользователю взаимодействовать с целевым элементом при активном шаге.
  • scrollTo – управление скроллом при появлении шага.

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

tour.addStep({
  id: 'mobile-step',
  text: 'Свайпните влево для следующего шага',
  attachTo: { element: '.feature', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next,
      classes: 'shepherd-button-primary',
      // поддержка тач-событий
      events: { touchstart: (e) => { e.preventDefault(); tour.next(); } }
    }
  ]
});

Важные нюансы работы с touch

  1. Отмена скролла при свайпе – без preventDefault() браузер может срабатывать на свайп как на скролл страницы, что ломает тур.
  2. Размер интерактивных элементов – кнопки должны быть не меньше 44×44 пикселей, чтобы было удобно касаться пальцем.
  3. Тестирование на разных устройствах – поведение touch-событий может различаться между iOS и Android, поэтому проверка на реальных девайсах обязательна.
  4. Анимации и плавность – при использовании scrollTo или кастомных свайпов нужно учитывать, что тяжелая анимация может замедлять реакцию тач-событий.

Совмещение кликов и Touch

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

function nextStepHandler(e) {
  e.preventDefault();
  tour.next();
}

nextButton.addEventListener('click', nextStepHandler);
nextButton.addEventListener('touchstart', nextStepHandler);

Это гарантирует, что тур будет корректно работать как на десктопах, так и на сенсорных устройствах.

Заключение по touch-событиям

Правильная обработка touch-событий в Shepherd.js позволяет создавать туры, удобные для мобильных пользователей. Использование touchstart, кастомных событий на кнопках, интеграция с Gesture-библиотеками и адаптивная настройка шагов обеспечивают плавное и предсказуемое поведение на любых устройствах.

Оглавление