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

Zepto.js предоставляет компактный и лаконичный API для работы с DOM, включая поддержку событий касания (touch events). Эти события особенно актуальны для мобильных устройств и сенсорных интерфейсов, где взаимодействие пользователя с элементами страницы осуществляется пальцем.

Основные события касания

Zepto поддерживает стандартные события касания, определённые спецификацией HTML5:

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

Эти события работают аналогично событиям мыши (mousedown, mousemove, mouseup), но передают в обработчик объект TouchEvent, содержащий массив точек касания.

$('#myElement').on('touchstart', function(e) {
    console.log('Начало касания', e.touches);
});

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

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

Каждое событие касания передает объект TouchEvent, который содержит следующие ключевые свойства:

  • touches — список всех текущих точек касания на экране.
  • targetTouches — список точек касания, которые остаются в пределах текущего элемента.
  • changedTouches — точки касания, которые были изменены с момента последнего события.

Пример использования changedTouches для получения координат последнего касания:

$('#myElement').on('touchend', function(e) {
    var touch = e.changedTouches[0];
    console.log('Координаты касания:', touch.pageX, touch.pageY);
});

Делегирование событий касания

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

$(document).on('touchstart', '.button', function(e) {
    $(this).addClass('active');
});

В этом примере событие touchstart срабатывает для всех элементов с классом .button, включая те, которые будут добавлены в DOM позже.

Управление стандартным поведением

По умолчанию события касания могут вызывать скроллинг страницы или масштабирование. Zepto позволяет контролировать это с помощью методов preventDefault и stopPropagation:

$('#swipeArea').on('touchmove', function(e) {
    e.preventDefault(); // отключает прокрутку страницы
    var touch = e.touches[0];
    console.log('Смещение пальца:', touch.pageX, touch.pageY);
});

Использование preventDefault предотвращает стандартное поведение браузера, что необходимо для реализации свайпов и жестов.

Оптимизация обработки касаний

При работе с мобильными устройствами важно минимизировать нагрузку на обработчики событий касания, чтобы интерфейс оставался отзывчивым:

  • Использовать делегирование вместо привязки событий к множеству элементов.
  • Ограничивать сложные вычисления внутри обработчиков touchmove.
  • Применять requestAnimationFrame для обновления интерфейса при анимации.

Пример оптимизированного обновления позиции элемента при свайпе:

var lastX = 0;
$('#swipeArea').on('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    lastX = touch.pageX;
    requestAnimationFrame(() => {
        $('#draggable').css('transform', `translateX(${lastX}px)`);
    });
});

Кастомные события на основе касаний

Zepto позволяет создавать собственные события, комбинируя базовые события касания. Например, реализация события tap:

$.fn.tap = function(callback) {
    return this.each(function() {
        var startTime;
        $(this).on('touchstart', function() {
            startTime = Date.now();
        }).on('touchend', function(e) {
            if (Date.now() - startTime < 200) { // короткое касание
                callback.call(this, e);
            }
        });
    });
};

$('#button').tap(function() {
    console.log('Тап зафиксирован');
});

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

Особенности работы на разных устройствах

  • На iOS событие touchend иногда срабатывает с задержкой, если используется click. Поэтому для мобильных интерфейсов лучше использовать события касания напрямую.
  • В Android старых версий события касания могут иметь неточную позицию при масштабировании страницы.
  • Всегда проверять наличие поддержки touch events через условие ('ontouchstart' in window) для корректной работы на устройствах без сенсора.

События мультитач

Zepto позволяет обрабатывать несколько одновременных касаний. Для этого используется массив touches:

$('#multiTouchArea').on('touchmove', function(e) {
    var touches = e.touches;
    for (var i = 0; i < touches.length; i++) {
        console.log(`Касание ${i}:`, touches[i].pageX, touches[i].pageY);
    }
});

Мультитач необходим для реализации масштабирования (pinch) и сложных жестов.

Взаимодействие с анимациями и жестами

Комбинация событий touchstart, touchmove и touchend позволяет реализовать жесты:

  • Свайп — определение направления перемещения пальца по экрану.
  • Тап — короткое касание без движения.
  • Долгое удержание — фиксирование события в течение определённого времени.
  • Пинч — изменение масштаба через два касания.

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

$('#swipeArea').on('touchstart', function(e) {
    this.startX = e.touches[0].pageX;
}).on('touchend', function(e) {
    var endX = e.changedTouches[0].pageX;
    if (Math.abs(endX - this.startX) > 50) {
        console.log('Свайп зафиксирован');
    }
});

Итоговые рекомендации по использованию

  • Использовать делегирование для динамических элементов.
  • Всегда контролировать стандартное поведение с помощью preventDefault.
  • Минимизировать обработку внутри touchmove для высокой производительности.
  • Проверять поддержку событий касания на устройстве перед использованием.
  • Применять кастомные события для абстракции повторяющихся шаблонов взаимодействия.

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

Оглавление