как определить свайп пальцем в javascript для iphone и android

Аватар пользователя Maksim Litvinov
Maksim Litvinov
28 марта 2025

Определение свайпа пальцем на устройствах iPhone и Android в JavaScript можно осуществить с помощью обработчиков событий touchstart, touchmove и touchend. Важно помнить, что свайп может быть осуществлен по горизонтали или вертикали и в одном из четырёх направлений: вверх, вниз, влево или вправо.

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

Необходимо начать слежение за движением пальца при событии touchstart, записав начальные координаты касания:

let startX, startY;
element.addEventListener('touchstart', function(e) {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

При событии touchmove можно отслеживать текущие координаты пальца и определить направление свайпа:

element.addEventListener('touchmove', function(e) {
    e.preventDefault(); // отменяем стандартное поведение браузера
    let currentX = e.touches[0].clientX;
    let currentY = e.touches[0].clientY;
    let deltaX = currentX - startX;
    let deltaY = currentY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
            // свайп вправо
        } else {
            // свайп влево
        }
    } else {
        if (deltaY > 0) {
            // свайп вниз
        } else {
            // свайп вверх
        }
    }
});

По окончании свайпа при событии touchend можно выполнить необходимые действия:

element.addEventListener('touchend', function(e) {
    // дополнительная логика при окончании свайпа
});

Это базовый пример и его можно доработать, добавив дополнительные проверки и оптимизации

0 0
Познакомьтесь с основами JavaScript бесплатно