Мобильная революция: как работать с touch-событиями на сайтах

document.addEventListener('touchstart', function(event) {
// Предотвращаем стандартное поведение браузера
event.preventDefault();

// Получаем первое касание
const touch = event.touches[0];

// Выводим координаты касания
console.log(`Touch started at X: ${touch.clientX}, Y: ${touch.clientY}`);
}, false);

const element = document.getElementById('interactive-area');

element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(event) {
// Предотвращаем прокрутку страницы
event.preventDefault();

// Сохраняем начальную позицию
const touch = event.touches[0];
startX = touch.clientX;
startY = touch.clientY;

// Отмечаем начало взаимодействия
isInteracting = true;

// Фиксируем время начала касания для определения жестов
touchStartTime = Date.now();

// Можно добавить визуальную обратную связь
this.classList.add('active');
}

function handleTouchMove(event) {
// Продолжаем только если взаимодействие активно
if (!isInteracting) return;

// Предотвращаем прокрутку страницы
event.preventDefault();

const touch = event.touches[0];
const currentX = touch.clientX;
const currentY = touch.clientY;

// Вычисляем дистанцию перемещения
const deltaX = currentX – startX;
const deltaY = currentY – startY;

// Применяем трансформацию или обновляем интерфейс
this.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

// Можно ограничить перемещение определенной областью
if (Math.abs(deltaX) > maxDistance || Math.abs(deltaY) > maxDistance) {
// Логика при достижении границ
}
}

function handleTouchEnd(event) {
if (!isInteracting) return;

// Определяем итоговое перемещение
const touch = event.changedTouches[0]; // Используем changedTouches!
const finalX = touch.clientX;
const finalY = touch.clientY;

// Вычисляем финальное смещение
const deltaX = finalX – startX;
const deltaY = finalY – startY;

// Вычисляем скорость жеста (для определения "броска")
const touchTime = Date.now() – touchStartTime;
const speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / touchTime;

// Определяем тип жеста на основе данных
if (Math.abs(deltaX) > 50 && speed > 0.5) {
// Горизонтальный свайп
if (deltaX > 0) {
// Свайп вправо
handleRightSwipe();
} else {
// Свайп влево
handleLeftSwipe();
}
} else {
// Возвращаем элемент в исходное положение
this.style.transform = 'translate(0, 0)';
}

// Сбрасываем состояние взаимодействия
isInteracting = false;
this.classList.remove('active');
}

class SwipeDetector {
constructor(element, options = {}) {
this.element = element;
this.options = {
threshold: options.threshold || 50, // Минимальное расстояние для свайпа
restraint: options.restraint || 100, // Максимальное отклонение в перпендикулярном направлении
allowedTime: options.allowedTime || 300, // Максимальное время свайпа в мс
onSwipeLeft: options.onSwipeLeft || function() {},
onSwipeRight: options.onSwipeRight || function() {},
onSwipeUp: options.onSwipeUp || function() {},
onSwipeDown: options.onSwipeDown || function() {}
};

this.startX = 0;
this.startY = 0;
this.startTime = 0;

// Привязываем методы к контексту
this.handleTouchStart = this.handleTouchStart.bind(this);
this.handleTouchEnd = this.handleTouchEnd.bind(this);

// Регистрируем обработчики
this.element.addEventListener('touchstart', this.handleTouchStart, false);
this.element.addEventListener('touchend', this.handleTouchEnd, false);
}

handleTouchStart(event) {
const touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
this.startTime = Date.now();
}

handleTouchEnd(event) {
const touch = event.changedTouches[0];
const elapsedTime = Date.now() – this.startTime;

if (elapsedTime <= this.options.allowedTime) {
const distX = touch.clientX – this.startX;
const distY = touch.clientY – this.startY;

if (Math.abs(distX) >= this.options.threshold && 
Math.abs(distY) <= this.options.restraint) {
// Горизонтальный свайп
distX < 0 ? this.options.onSwipeLeft() : this.options.onSwipeRight();
} else if (Math.abs(distY) >= this.options.threshold && 
Math.abs(distX) <= this.options.restraint) {
// Вертикальный свайп
distY < 0 ? this.options.onSwipeUp() : this.options.onSwipeDown();
}
}
}

destroy() {
// Очистка обработчиков при необходимости
this.element.removeEventListener('touchstart', this.handleTouchStart);
this.element.removeEventListener('touchend', this.handleTouchEnd);
}
}

const carousel = document.querySelector('.carousel');
const swipeDetector = new SwipeDetector(carousel, {
onSwipeLeft: () => carousel.goToNextSlide(),
onSwipeRight: () => carousel.goToPrevSlide()
});

class PinchDetector {
constructor(element, options = {}) {
this.element = element;
this.options = {
onPinchIn: options.onPinchIn || function() {},
onPinchOut: options.onPinchOut || function() {},
onRotate: options.onRotate || function() {}
};

this.initialDistance = 0;
this.initialAngle = 0;

this.element.addEventListener('touchstart', this.handleTouchStart.bind(this));
this.element.addEventListener('touchmove', this.handleTouchMove.bind(this));
}

handleTouchStart(event) {
if (event.touches.length === 2) {
// Сохраняем начальное расстояние между двумя пальцами
this.initialDistance = this.getDistance(
event.touches[0].clientX,
event.touches[0].clientY,
event.touches[1].clientX,
event.touches[1].clientY
);

// Сохраняем начальный угол
this.initialAngle = this.getAngle(
event.touches[0].clientX,
event.touches[0].clientY,
event.touches[1].clientX,
event.touches[1].clientY
);
}
}

handleTouchMove(event) {
if (event.touches.length === 2) {
event.preventDefault(); // Предотвращаем прокрутку при мультитач

// Вычисляем текущее расстояние
const currentDistance = this.getDistance(
event.touches[0].clientX,
event.touches[0].clientY,
event.touches[1].clientX,
event.touches[1].clientY
);

// Вычисляем текущий угол
const currentAngle = this.getAngle(
event.touches[0].clientX,
event.touches[0].clientY,
event.touches[1].clientX,
event.touches[1].clientY
);

// Вычисляем масштаб изменения
const scale = currentDistance / this.initialDistance;

// Вычисляем угол поворота
const rotation = currentAngle – this.initialAngle;

// Определяем тип жеста и вызываем соответствующий обработчик
if (scale > 1.1) {
this.options.onPinchOut(scale);
} else if (scale < 0.9) {
this.options.onPinchIn(scale);
}

if (Math.abs(rotation) > 10) {
this.options.onRotate(rotation);
}
}
}

getDistance(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 – x1, 2) + Math.pow(y2 – y1, 2));
}

getAngle(x1, y1, x2, y2) {
return Math.atan2(y2 – y1, x2 – x1) * 180 / Math.PI;
}
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.button { touch-action: manipulation; }

class FastTap {
constructor(element, callback) {
this.element = element;
this.callback = callback;

this.startX = 0;
this.startY = 0;
this.threshold = 10; // Допустимое смещение для распознавания нажатия
this.isMoving = false;

this.element.addEventListener('touchstart', this.onTouchStart.bind(this));
this.element.addEventListener('touchmove', this.onTouchMove.bind(this));
this.element.addEventListener('touchend', this.onTouchEnd.bind(this));
}

onTouchStart(event) {
this.isMoving = false;
const touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
}

onTouchMove(event) {
const touch = event.touches[0];
const diffX = Math.abs(touch.clientX – this.startX);
const diffY = Math.abs(touch.clientY – this.startY);

// Если пользователь переместил палец больше порогового значения, считаем это движением, а не нажатием
if (diffX > this.threshold || diffY > this.threshold) {
this.isMoving = true;
}
}

onTouchEnd(event) {
// Вызываем callback только если это было касание, а не движение
if (!this.isMoving) {
event.preventDefault(); // Предотвращаем стандартный клик
this.callback(event);
}
}
}

// Использование:
const button = document.querySelector('.fast-button');
new FastTap(button, () => console.log('Быстрое нажатие!'));

// Неоптимально: вызывает reflow на каждой итерации
function moveElementSlow(element, x, y) {
element.style.left = x + 'px';
element.style.top = y + 'px';
}

// Оптимально: использует GPU-ускорение
function moveElementFast(element, x, y) {
element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
}

// Функция троттлинга – ограничивает частоту вызовов
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() – lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit – (Date.now() – lastRan));
}
}
}

// Пример использования
element.addEventListener('touchmove', throttle(function(event) {
// Обработка события touchmove
updateElementPosition(event);
}, 16)); // Ограничиваем до ~60 FPS (1000ms / 60 ≈ 16ms)

// Старый способ, который может блокировать прокрутку
document.addEventListener('touchstart', function(e) {
// Какой-то код...
});

// Оптимизированный способ с passive listener
document.addEventListener('touchstart', function(e) {
// Какой-то код...
}, { passive: true }); // Браузер будет знать, что preventDefault не вызывается

const isTouchDevice = () => {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
};

const touchSupport = isTouchDevice();

// Применяем соответствующие стили и поведение
document.body.classList.add(touchSupport ? 'touch-device' : 'no-touch');

let lastTouchTime = 0;

// Устанавливаем обработчик касаний
window.addEventListener('touchstart', function() {
lastTouchTime = new Date();
document.body.classList.add('touch-device');
});

// Проверяем, было ли недавнее касание при движении мыши
window.addEventListener('mousemove', function() {
const now = new Date();
if (now – lastTouchTime > 500) {
// Если последнее касание было давно, считаем, что пользователь использует мышь
document.body.classList.remove('touch-device');
document.body.classList.add('mouse-device');
}
});

.button {
padding: 12px 20px; /* Базовый размер для десктопа */
font-size: 16px;
}

/* Для устройств с touch-экраном увеличиваем целевую область */
@media (pointer: coarse) {
.button {
padding: 16px 24px;
font-size: 18px;
}
}

class HybridInteraction {
constructor(element) {
this.element = element;
this.isTouching = false;

// Регистрируем обработчики мыши
this.element.addEventListener('mouseenter', this.onMouseEnter.bind(this));
this.element.addEventListener('mouseleave', this.onMouseLeave.bind(this));
this.element.addEventListener('click', this.onClick.bind(this));

// Регистрируем обработчики касаний
this.element.addEventListener('touchstart', this.onTouchStart.bind(this));
this.element.addEventListener('touchend', this.onTouchEnd.bind(this));
this.element.addEventListener('touchcancel', this.onTouchCancel.bind(this));
}

// Обработчики мыши
onMouseEnter() {
if (!this.isTouching) {
this.element.classList.add('hover');
}
}

onMouseLeave() {
this.element.classList.remove('hover');
}

onClick(event) {
// Обработка клика общая для мыши и касания
this.activateElement();
}

// Обработчики касаний
onTouchStart(event) {
this.isTouching = true;
this.element.classList.add('active');

// Запоминаем начальную позицию для определения свайпа
if (event.touches.length === 1) {
const touch = event.touches[0];
this.touchStartX = touch.clientX;
this.touchStartY = touch.clientY;
}
}

onTouchEnd(event) {
this.isTouching = false;
this.element.classList.remove('active');

// Проверяем, был ли это свайп или нажатие
if (event.changedTouches.length === 1) {
const touch = event.changedTouches[0];
const deltaX = touch.clientX – this.touchStartX;
const deltaY = touch.clientY – this.touchStartY;

if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
// Это было нажатие, а не свайп
this.activateElement();
}
}
}

onTouchCancel() {
this.isTouching = false;
this.element.classList.remove('active');
}

// Общая функция активации элемента
activateElement() {
this.element.classList.add('activated');
// Выполняем нужное действие
console.log('Элемент активирован!');

// Удаляем класс активации через небольшую задержку
setTimeout(() => {
this.element.classList.remove('activated');
}, 200);
}
}

// Применяем к элементам интерфейса
document.querySelectorAll('.interactive-element').forEach(element => {
new HybridInteraction(element);
});

class PullToRefresh {
constructor(element, options = {}) {
this.element = element;
this.options = {
threshold: options.threshold || 60, // Порог для активации обновления
callback: options.callback || (() => console.log('Обновление!')),
};

this.startY = 0;
this.currentY = 0;
this.isRefreshing = false;
this.indicator = this.createIndicator();

this.element.addEventListener('touchstart', this.onTouchStart.bind(this));
this.element.addEventListener('touchmove', this.onTouchMove.bind(this));
this.element.addEventListener('touchend', this.onTouchEnd.bind(this));
}

createIndicator() {
const indicator = document.createElement('div');
indicator.className = 'pull-indicator';
indicator.innerHTML = '⟳';
indicator.style.position = 'absolute';
indicator.style.top = '-50px';
indicator.style.left = '50%';
indicator.style.transform = 'translateX(-50%)';
indicator.style.transition = 'transform 0.2s';
this.element.prepend(indicator);
return indicator;
}

onTouchStart(event) {
if (this.isRefreshing) return;

// Проверяем, находимся ли мы в верхней части элемента
const scrollTop = this.element.scrollTop;
if (scrollTop <= 0) {
this.startY = event.touches[0].clientY;
this.element.style.transition = 'transform 0.1s';
}
}

onTouchMove(event) {
if (this.isRefreshing) return;

const scrollTop = this.element.scrollTop;
if (scrollTop > 0) return; // Не активируем, если страница прокручена вниз

this.currentY = event.touches[0].clientY;
const pull = this.currentY – this.startY;

if (pull > 0) {
// Предотвращаем стандартное поведение, только если тянем вниз
event.preventDefault();

// Применяем нелинейное сопротивление, чтобы ограничить расстояние
const resistance = 0.4;
const translateY = Math.pow(pull, resistance);

this.element.style.transform = `translateY(${translateY}px)`;

// Обновляем индикатор
const progress = Math.min(translateY / this.options.threshold, 1);
this.indicator.style.transform = `translateX(-50%) rotate(${progress * 360}deg)`;
}
}

onTouchEnd() {
if (this.isRefreshing) return;

const pull = this.currentY – this.startY;

if (pull > this.options.threshold) {
// Активируем обновление
this.isRefreshing = true;
this.element.style.transform = `translateY(50px)`;
this.indicator.classList.add('refreshing');
this.indicator.style.animation = 'spin 1s infinite linear';

// Вызываем функцию обновления
this.options.callback().then(() => {
// После завершения обновления
this.reset();
}).catch(() => {
// В случае ошибки также сбрасываем состояние
this.reset();
});
} else {
// Возвращаем в исходное положение
this.reset();
}
}

reset() {
this.element.style.transition = 'transform 0.3s';
this.element.style.transform = '';
this.indicator.style.animation = '';
this.indicator.classList.remove('refreshing');

setTimeout(() => {
this.isRefreshing = false;
}, 300);
}
}

// Пример использования:
const contentElement = document.querySelector('.content-container');
new PullToRefresh(contentElement, {
callback: () => new Promise(resolve => {
// Имитация запроса к серверу
setTimeout(resolve, 1500);
})
});