Элегантная реализация Long Press обработчика с помощью CSS анимации

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

▎Зачем нужен Long Press?

Long Press — это взаимодействие, при котором пользователь удерживает палец на экране или кнопку в течение определенного времени. Это может быть полезно для вызова дополнительных действий, таких как контекстное меню, всплывающие подсказки или специальные функции, которые не должны выполняться при обычном клике.

▎Стандартное решение

Реализация обработчиков долгого и короткого нажатия на чистом JavaScript будет выглядеть примерно следующим образом:

/* HTML */ <button id="btn">Click / Long Press</button>

/* JavaScript */ const btn = document.getElementById('btn'); const clickHandler = () => console.log('Сlick Handler'); const longPressHandler = () => console.log('Long Press Handler');  let timerId, longPressed  btn.onmousedown = () => {   longPressed = false   timerId = setTimeout(() => {     longPressed = true     longPressHandler();   }, 200); }  btn.onclick = () => {   if (!longPressed) clickHandler();   clearTimeout(timerId); }  btn.onmouseleave = () => {   clearTimeout(timerId); }

Демонстрация на CodePen

Как мы видим, код достаточно громоздкий; необходимо использование таймера и глобальных переменных. Также нужно учитывать эффект, когда пользователь нажал на элемент, а отпустил его вне границ — такое поведение не должно вызывать ни один из наших обработчиков. Здесь это отслеживается с помощью слушателя mouseleave.

Проблема реализации только с помощью JavaScript заключается в том, что, как правило, после длительного нажатия будет следовать применение каких-либо стилей к элементу, а значит, нам придется писать дополнительный код на CSS.

▎Универсальное решение

Давайте рассмотрим, как мы можем реализовать обработчики короткого и длинного нажатия только с помощью CSS:

/* CSS */ #btn {   transition: background-color 1s 200ms; /* animation for long press */ }  #btn:active {   animation-name: interruptClick;   animation-delay: 200ms;   animation-fill-mode: forwards;   background-color: PaleTurquoise; /* styles for long press */ }  #btn:not(:hover){   animation-play-state: paused; }  @keyframes interruptClick {   to {     pointer-events: none;   } }

/* HTML */ <button id="btn">Click / Long Press</button>

/* JavaScript */ const btn = document.getElementById('btn');  btn.onclick = () => console.log('Сlick Handler');  btn.onanimationend = () => console.log('Long Press Handler');

Демонстрация на CodePen

Здесь мы видим, что логика определения долгого и короткого нажатия реализована полностью на CSS. С помощью JavaScript мы только устанавливаем слушателей. При долгом нажатии будет применена отдельная анимация стилизации кнопки (transition: background-color).

▎Как это работает?

1. CSS-анимация для реализации обработчиков:

:active: Этот псевдокласс позволяет применять свойства анимации только в момент удержания кнопки.

animation-name: Определяем @keyframes анимацию с одним ключевым кадром.

pointer-events: Ключевой кадр содержит свойство, управляющее тем, как элемент реагирует на события указателя (например, клики мышью). Клик считается завершенным, когда происходит и нажатие, и отпускание кнопки мыши на одном и том же элементе. Мы используем это свойство со значением “none”, чтобы предотвратить событие клика.

animation-delay: Анимация начинается через 200 миллисекунд после нажатия; это минимальное время удержания, необходимое для его определения как длительного.

animation-fill-mode: Время продолжительности анимации не указано, но благодаря значению “forwards” все свойства ключевого кадра будут оставаться активными до окончания удержания.

:not(:hover): Если пользователь нажал на кнопку, а затем отпустил за её границами, то анимация interruptClick будет остановлена с помощью свойства animation-play-state: paused, и ни один из обработчиков не будет вызван.

2. JavaScript слушатели:

onclick: Этот слушатель соответствует короткому нажатию.

onanimationend: Этот слушатель соответствует поведению долгого нажатия и срабатывает, когда заканчивается анимация interruptClick.

▎Преимущества данного подхода

• Универсальность: Все визуальные эффекты при длинном нажатии можно реализовать только с помощью CSS.

• Простота: Этот метод не требует сложных библиотек или дополнительных зависимостей.

• Эффективность: Использование CSS-анимаций позволяет избежать лишних вычислений в JavaScript, что может улучшить производительность.

• Чистота кода: Код остается чистым и легко читаемым.

▎Заключение

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

Я протестировал это решение в нескольких браузерах, на компьютере и мобильном устройстве. Перед использованием кода в продакшене рекомендую провести дополнительное тестирование.