Основы работы с touch

Zepto.js предоставляет лёгкий и удобный способ работы с событиями касаний на мобильных устройствах. В отличие от стандартного JavaScript, Zepto упрощает обработку событий touchstart, touchmove, touchend и их комбинаций, позволяя быстро создавать интерактивные элементы для сенсорных интерфейсов.

События касания

В Zepto события касания работают аналогично событиям мыши, но учитывают специфику сенсорных экранов. Основные события:

  • touchstart — возникает в момент, когда палец коснулся экрана.
  • touchmove — срабатывает при перемещении пальца по экрану.
  • touchend — срабатывает при отрыве пальца от экрана.
  • touchcancel — срабатывает, если система прерывает текущий touch (например, при входящем звонке или блокировке устройства).

Эти события могут быть привязаны к элементу через метод .on():

$('#element').on('touchstart', function(e) {
    console.log('Касание начато');
});

$('#element').on('touchmove', function(e) {
    console.log('Касание перемещается');
});

$('#element').on('touchend', function(e) {
    console.log('Касание завершено');
});

Zepto обеспечивает кросс-браузерную обработку, автоматически нормализуя объекты событий, что делает работу с ними удобной.

Объект события и координаты

Объект события в Zepto содержит информацию о касании, доступную через e.touches, e.targetTouches и e.changedTouches:

  • touches — массив всех текущих касаний на экране.
  • targetTouches — касания, относящиеся к конкретному элементу.
  • changedTouches — касания, изменившие своё состояние на текущем событии.

Для получения координат касания используют свойства pageX и pageY:

$('#element').on('touchmove', function(e) {
    var touch = e.touches[0];
    console.log('X: ' + touch.pageX + ', Y: ' + touch.pageY);
});

Zepto также упрощает доступ к первому касанию через объект события, что позволяет писать компактный код.

Обработка жестов

Zepto поддерживает создание базовых жестов на основе событий touch. Основные жесты:

  1. Тап (tap) — короткое прикосновение без движения.
  2. Долгий тап (longTap) — удержание пальца на элементе более заданного времени (обычно >500 мс).
  3. Свайп (swipe) — движение пальца в направлении с определённой дистанцией и скоростью.
  4. Свайп вверх/вниз/влево/вправо — направление определяется сравнением координат начала и конца касания.

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

var startX, startY;

$('#element').on('touchstart', function(e) {
    var touch = e.touches[0];
    startX = touch.pageX;
    startY = touch.pageY;
});

$('#element').on('touchend', function(e) {
    var touch = e.changedTouches[0];
    var deltaX = touch.pageX - startX;
    var deltaY = touch.pageY - startY;

    if (Math.abs(deltaX) > 30 || Math.abs(deltaY) > 30) {
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) console.log('Свайп вправо');
            else console.log('Свайп влево');
        } else {
            if (deltaY > 0) console.log('Свайп вниз');
            else console.log('Свайп вверх');
        }
    }
});

Использование встроенных расширений Zepto для touch

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

$('#element').tap(function() {
    console.log('Тап по элементу');
});

$('#element').swipeLeft(function() {
    console.log('Свайп влево выполнен');
});

$('#element').longTap(function() {
    console.log('Долгий тап выполнен');
});

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

Отмена стандартного поведения

На мобильных устройствах события touch часто вызывают прокрутку или масштабирование. Zepto позволяет предотвращать это стандартное поведение:

$('#element').on('touchmove', function(e) {
    e.preventDefault(); // отключение скролла
});

Использование e.preventDefault() важно для реализации собственных жестов и интерактивных элементов без вмешательства системных действий.

Совмещение с событиями мыши

Для кросс-платформенной совместимости можно комбинировать события touch и mouse. Zepto позволяет удобно привязывать обработчики для обоих типов событий:

$('#element').on('touchstart mousedown', function(e) {
    console.log('Начало взаимодействия');
});

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

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

  • Минимизировать количество обработчиков — лучше использовать делегирование событий через .on() на родительском элементе.
  • Фильтровать касания по элементу — использовать targetTouches для точного отслеживания действий пользователя.
  • Оптимизировать для производительности — события touchmove могут вызываться десятки раз в секунду, поэтому код внутри них должен быть максимально лёгким.
  • Комбинировать с CSS-переходами — для плавных анимаций свайпов и свайп-панелей рекомендуется использовать transform: translate и transition вместо JavaScript-анимаций.

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

Оглавление