Тач-события в JavaScript: полное руководство для разработчиков

Для кого эта статья:

• Веб-разработчики, особенно начинающие и среднеопытные
• Специалисты по пользовательскому интерфейсу (UI) и пользовательскому опыту (UX)

• Люди, интересующиеся созданием и оптимизацией мобильных веб-приложений

  Помните старые времена, когда взаимодействие с веб-страницами ограничивалось кликами мышки? А потом появились смартфоны, и всё перевернулось с ног на голову. Разработчикам пришлось переосмыслить интерфейсы, адаптировать их под тач-события. И до сих пор многие из нас спотыкаются на базовых вещах: странные задержки при касаниях, неработающие свайпы, глючные мультитач-жесты. Пора разобраться с этой головной болью раз и навсегда! В этом гайде я разложу по полочкам всё, что нужно знать о тач-событиях в JavaScript. 🚀

Хотите стать востребованным веб-разработчиком, но не знаете с чего начать? Обучение веб-разработке от Skypro – ваш билет в мир интерактивных интерфейсов! На курсе вы не только освоите JavaScript и фреймворки, но и научитесь создавать потрясающие сенсорные взаимодействия для мобильных устройств. Наши выпускники создают интерфейсы, которыми пользуются миллионы. Присоединяйтесь и станьте одним из них!

Основы тач-событий в JavaScript для мобильных устройств

Прежде чем погружаться в сложные концепции, давайте разберёмся с фундаментом. Тач-события — это API-интерфейс, позволяющий JavaScript распознавать и реагировать на взаимодействия пользователя с сенсорным экраном. Если вы когда-либо листали ленту, масштабировали фото или использовали карусель на мобильном устройстве, вы уже знакомы с тач-событиями с пользовательской стороны.

Важно понимать, что тач-события и мышиные события — это не одно и то же. На устройствах с сенсорным экраном браузер обрабатывает касание и генерирует как тач-события, так и соответствующие события мыши для обратной совместимости. Именно это нередко приводит к проблемам с производительностью и задержкам.

Антон Ковалёв, старший фронтенд-разработчик

Однажды наш проект столкнулся с необычной проблемой. Пользователи жаловались, что нажатие на кнопку "Отправить форму" в нашем мобильном приложении иногда требовало двойного нажатия. Мы потратили несколько дней, пытаясь понять, в чём дело. Оказалось, что мы слушали и click, и touchend события на одном и том же элементе, что приводило к конфликтам. В мобильном Safari это вызывало странные задержки.

Решением стало полное переписывание обработчиков событий с учетом особенностей тач-интерфейса. Мы использовали touchstart для немедленной обратной связи (изменение стиля кнопки) и touchend с preventDefault() для обработки самого действия. После этого отклик кнопки стал мгновенным, и количество жалоб сократилось до нуля.

Основные тач-события в JavaScript включают:

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

Каждое тач-событие имеет полезные свойства, наиболее важные из которых:

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

Вот простой пример регистрации тач-событий:

// Регистрация обработчиков тач-событий
element.addEventListener('touchstart', handleStart);
element.addEventListener('touchmove', handleMove);
element.addEventListener('touchend', handleEnd);
element.addEventListener('touchcancel', handleCancel);

// Простой обработчик touchstart события
function handleStart(event) {
// Предотвращаем прокрутку и зум
event.preventDefault();

const touch = event.touches[0];
console.log(`Касание начато: X: ${touch.clientX}, Y: ${touch.clientY}`);
}

Тач-события дают вам гораздо больше информации, чем события мыши. Например, вы можете отслеживать несколько точек касания одновременно, получать информацию о силе нажатия (если устройство поддерживает это) и работать с жестами масштабирования или поворота.

Базовые тач-события и их обработка в интерфейсах

Теперь, когда мы разобрались с основами, давайте углубимся в практическое применение тач-событий для создания интерактивных интерфейсов. 🔥

Работа с тач-событиями начинается с правильного слушания и обработки каждого типа события. Важно понимать, когда использовать каждое из них:

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

Рассмотрим пример создания простого слайдера с использованием тач-событий:

// Элемент слайдера
const slider = document.querySelector('.slider');
let startX, currentTranslate = 0, prevTranslate = 0, isDragging = false;

// Инициализация обработчиков
slider.addEventListener('touchstart', touchStart);
slider.addEventListener('touchmove', touchMove);
slider.addEventListener('touchend', touchEnd);

function touchStart(e) {
startX = e.touches[0].clientX;
isDragging = true;
slider.style.transition = 'none'; // Отключаем анимацию во время перетаскивания
}

function touchMove(e) {
if (!isDragging) return;

const currentX = e.touches[0].clientX;
const diff = currentX – startX;

// Применяем смещение с учетом предыдущего положения
currentTranslate = prevTranslate + diff;

// Применяем трансформацию
slider.style.transform = `translateX(${currentTranslate}px)`;
}

function touchEnd() {
isDragging = false;

// Сохраняем текущее положение
prevTranslate = currentTranslate;

// Включаем обратно анимацию
slider.style.transition = 'transform 0.3s ease';
}

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

• Предотвращение стандартного поведения: используйте event.preventDefault() с осторожностью, чтобы не блокировать полезные взаимодействия, такие как прокрутка страницы
• Использование changedTouches: в событии touchend у вас больше нет активных касаний в touches, поэтому необходимо использовать changedTouches
• Пассивные слушатели: для улучшения производительности используйте опцию passive при регистрации обработчиков, если вы не планируете вызывать preventDefault()

Вот пример использования пассивных слушателей:

element.addEventListener('touchmove', handleMove, { passive: true });

Одной из распространенных ошибок при работе с тач-событиями является неправильное определение жестов. Например, слишком раннее срабатывание свайпа, когда пользователь просто слегка передвинул палец, может привести к нежелательным действиям.

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

function touchMove(e) {
const currentX = e.touches[0].clientX;
const diff = currentX – startX;

// Используем порог в 10px для определения намеренного свайпа
if (Math.abs(diff) > 10) {
// Пользователь действительно хочет свайпнуть
currentTranslate = prevTranslate + diff;
slider.style.transform = `translateX(${currentTranslate}px)`;
}
}

Продвинутые техники отслеживания мультитач-жестов

Работа с одним касанием — это лишь начало пути. Настоящая магия мобильных интерфейсов начинается, когда вы осваиваете мультитач-жесты: пинч, ротацию, мультитач-свайпы. Они делают ваш интерфейс действительно естественным для пользователя. 👐

Мультитач-жесты требуют отслеживания нескольких точек касания одновременно. Главная сложность — правильно интерпретировать движение нескольких пальцев и превратить эти данные в осмысленное действие.

Наиболее распространенные мультитач-жесты включают:

• Пинч (pinch) — сведение или разведение пальцев для масштабирования
• Поворот (rotation) — вращение двух или более пальцев вокруг центральной точки
• Мультисвайп (multi-swipe) — свайп несколькими пальцами одновременно

Рассмотрим пример реализации пинч-жеста для масштабирования изображения:

const image = document.querySelector('.zoomable-image');
let initialDistance = 0;
let currentScale = 1;

image.addEventListener('touchstart', handlePinchStart);
image.addEventListener('touchmove', handlePinchMove);

function handlePinchStart(e) {
if (e.touches.length === 2) {
// Запоминаем начальное расстояние между пальцами
initialDistance = getDistance(
e.touches[0].clientX,
e.touches[0].clientY,
e.touches[1].clientX,
e.touches[1].clientY
);
}
}

function handlePinchMove(e) {
e.preventDefault(); // Предотвращаем стандартное масштабирование

if (e.touches.length === 2) {
// Вычисляем текущее расстояние между пальцами
const currentDistance = getDistance(
e.touches[0].clientX,
e.touches[0].clientY,
e.touches[1].clientX,
e.touches[1].clientY
);

// Вычисляем новый масштаб
const scaleFactor = currentDistance / initialDistance;
const newScale = currentScale * scaleFactor;

// Ограничиваем масштаб разумными пределами
if (newScale > 0.5 && newScale < 3) {
image.style.transform = `scale(${newScale})`;
}
}
}

// Функция для вычисления расстояния между двумя точками
function getDistance(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 – x1, 2) + Math.pow(y2 – y1, 2));
}

Михаил Дорошенко, UI/UX разработчик

Я разрабатывал приложение для просмотра и редактирования фотографий, и столкнулся с интересной проблемой: пользователи не могли точно контролировать масштаб при пинч-жесте. Особенно это проявлялось на недорогих Android-устройствах, где точность тачпада была не на высоте.

Мы решили эту проблему нестандартным способом. Вместо прямого использования отношения расстояний мы применили логарифмическую функцию для смягчения масштабирования:

JS

Скопировать код

const scaleFactor = Math.log(currentDistance / initialDistance + 1) * sensitivity;

Это дало удивительный результат — масштабирование стало более плавным и предсказуемым даже на бюджетных устройствах. Пользователи отметили, что теперь им гораздо проще контролировать приближение фотографии именно до нужного им масштаба без лишних "прыжков".

А еще мы добавили небольшую задержку в 16мс (примерно один кадр), чтобы сгладить рендеринг при масштабировании. Это кажется противоречивым, но иногда небольшая задержка может сделать анимацию визуально более плавной!

Для жеста вращения алгоритм немного усложняется, но принцип остается похожим:

function handleRotation(e) {
if (e.touches.length === 2) {
// Вычисляем угол между двумя точками касания
const angle = Math.atan2(
e.touches[1].clientY – e.touches[0].clientY,
e.touches[1].clientX – e.touches[0].clientX
) * 180 / Math.PI;

// Сравниваем с начальным углом и применяем вращение
const rotation = angle – initialAngle;
element.style.transform = `rotate(${rotation}deg)`;
}
}

Важно помнить о нескольких аспектах при работе с мультитач-жестами:

• Комбинированные жесты — пользователи могут выполнять пинч и ротацию одновременно
• Устойчивость к "прыжкам" — используйте сглаживание для предотвращения резких изменений
• Производительность — мультитач-жесты могут быть вычислительно затратными, оптимизируйте расчеты
• Кроссбраузерность — тестируйте на разных устройствах и браузерах

Устранение задержки клика на мобильных устройствах

Если вы когда-либо замечали странную задержку между нажатием на элемент и реакцией на мобильном устройстве, то вы столкнулись с печально известной задержкой клика. Эта проблема может серьезно подорвать впечатление пользователей от вашего приложения, заставляя интерфейс казаться "липким" и неотзывчивым. ⏱️

Задержка клика возникает из-за того, что мобильные браузеры ждут примерно 300 миллисекунд после touchend события, прежде чем запустить событие click. Это сделано для того, чтобы различать одиночные тапы и двойные тапы (которые используются для зума в Safari).

Существует несколько методов устранения этой задержки:

1. Мета-тег viewport с width=device-width

Самый простой способ избавиться от задержки клика на большинстве современных браузеров — использовать правильный мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Когда браузер видит этот тег, он предполагает, что ваш сайт оптимизирован для мобильных устройств и отключает задержку клика.

2. CSS свойство touch-action

Свойство CSS touch-action позволяет вам указать, какие жесты должны обрабатываться браузером:

.button {
touch-action: manipulation; /* Отключает задержку клика */
}

Другие полезные значения touch-action:

• auto — браузер обрабатывает все жесты (значение по умолчанию)
• none — отключает все встроенные жесты браузера
• pan-x или pan-y — позволяет только горизонтальную или вертикальную прокрутку
• pinch-zoom — позволяет только масштабирование щипком

3. Использование touchend вместо click

Вместо того чтобы полагаться на событие click, можно использовать touchend напрямую:

const button = document.querySelector('.button');

button.addEventListener('touchend', function(e) {
// Предотвращаем событие click
e.preventDefault();

// Выполняем нужное действие здесь
console.log('Кнопка нажата без задержки!');
});

Однако этот подход требует осторожности — вам нужно позаботиться о пользователях, использующих клавиатуру или мышь:

// Для мыши и клавиатуры
button.addEventListener('click', handleButtonClick);

// Для сенсорных устройств
button.addEventListener('touchend', function(e) {
e.preventDefault();
handleButtonClick(e);
});

function handleButtonClick(e) {
console.log('Кнопка нажата!');
}

4. Использование библиотек

Есть несколько библиотек, которые помогают решить проблему задержки клика:

• FastClick — классическое решение, которое прослушивает touchend и симулирует событие click
• hammer.js — библиотека для работы с жестами, которая также решает проблему задержки клика

Пример использования FastClick:

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

При устранении задержки клика важно помнить о следующих аспектах:

• Предотвращение "призрачных кликов" — если вы используете touchend, убедитесь, что вы правильно предотвращаете последующее событие click
• Доступность — пользователи с ассистивными технологиями могут полагаться на события click
• Тестирование — проверяйте ваше решение на разных устройствах и браузерах

Оптимизация производительности при работе с касаниями

Отзывчивый и плавный пользовательский интерфейс — ключ к удовлетворенности пользователей. Для мобильных устройств, где вычислительные ресурсы ограничены, оптимизация обработки тач-событий критически важна. Даже небольшие задержки и рывки при скролле или взаимодействии с интерфейсом могут значительно ухудшить пользовательский опыт. 📱

Рассмотрим ключевые техники оптимизации производительности при работе с тач-событиями:

1. Использование passive listeners

Пассивные слушатели событий указывают браузеру, что обработчик не будет вызывать preventDefault(), позволяя браузеру начать скролл немедленно:

element.addEventListener('touchmove', handleTouchMove, { passive: true });

Это особенно важно для событий touchmove на прокручиваемых контейнерах. Использование passive: true может значительно улучшить плавность прокрутки.

2. Дебаунсинг и тротлинг событий

Тач-события могут срабатывать очень часто, особенно touchmove, что может вызвать проблемы с производительностью. Используйте дебаунсинг и тротлинг для ограничения частоты вызова обработчиков:

// Тротлинг для touchmove
let lastCallTime = 0;
const throttleInterval = 16; // ~60fps

function throttledTouchMove(e) {
const now = Date.now();

if (now – lastCallTime >= throttleInterval) {
handleTouchMove(e);
lastCallTime = now;
}
}

element.addEventListener('touchmove', throttledTouchMove);

3. Использование requestAnimationFrame

Для плавных анимаций при взаимодействии с тач-событиями используйте requestAnimationFrame вместо прямого изменения стилей:

let requestId;
let moveX = 0, moveY = 0;

function handleTouchMove(e) {
moveX = e.touches[0].clientX;
moveY = e.touches[0].clientY;

// Если анимация еще не запущена
if (!requestId) {
requestId = requestAnimationFrame(updateElementPosition);
}
}

function updateElementPosition() {
element.style.transform = `translate(${moveX}px, ${moveY}px)`;
requestId = null; // Сбрасываем ID запроса
}

4. CSS-ускорение

Используйте CSS-свойства, которые могут быть ускорены GPU:

.optimized-element {
transform: translateZ(0); /* Активирует аппаратное ускорение */
will-change: transform; /* Подсказка браузеру о предстоящих изменениях */
}

Однако используйте will-change с осторожностью, так как чрезмерное его применение может привести к обратному эффекту.

5. Эффективное управление памятью

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

// Добавление обработчика
element.addEventListener('touchstart', handleTouchStart);

// Удаление обработчика, когда он не нужен
element.removeEventListener('touchstart', handleTouchStart);

6. Минимизация перерисовок и перекомпоновок

Группируйте изменения DOM и выполняйте их за один раз:

function updateUI() {
// Плохо: вызывает несколько перерисовок
element.style.width = '100px';
element.style.height = '100px';
element.style.opacity = '0.5';

// Хорошо: все изменения за один раз
requestAnimationFrame(() => {
element.style.cssText = 'width: 100px; height: 100px; opacity: 0.5;';
});
}

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

Рекомендации по оптимизации для конкретных типов взаимодействий:

• Для прокрутки списков: используйте виртуализацию списка (рендеринг только видимых элементов)
• Для жестов перетаскивания: применяйте только transform вместо left/top
• Для анимаций при жестах: предпочитайте CSS-анимации JS-анимациям где возможно
• Для сложных вычислений: рассмотрите использование Web Workers, чтобы не блокировать основной поток

И наконец, всегда тестируйте производительность на реальных устройствах. Эмуляторы и высокопроизводительные компьютеры могут скрыть проблемы, которые проявятся на менее мощных мобильных устройствах. Используйте инструменты для профилирования, такие как Chrome DevTools Performance tab, чтобы выявить узкие места в вашем коде.

Освоив тач-события в JavaScript, вы поднимаете свои мобильные интерфейсы на новый уровень. Помните главное: всегда ставьте пользовательский опыт превыше всего. Тестируйте на разных устройствах, оптимизируйте производительность и не бойтесь экспериментировать с новыми типами взаимодействий. Мобильные устройства предлагают уникальные возможности для естественного взаимодействия, которые выходят далеко за пределы традиционных интерфейсов. Используйте эти возможности с умом, и ваши пользователи обязательно это оценят.