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

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