События :hover и :active для мобильных устройств

Иногда стили, прописанные для псевдоклассов :hover и :active, работают некорректно на устройствах с тачскринами, (мобилки, планшеты). Например, при наведении курсора на кнопку, она увеличится в размере, при клике — примет исходный размер. В таком случае, на мобилке, тапая на кнопку сработает :hover и кнопка увеличится, а UI сломается 🙂

Решение для устройств с курсором

Для того чтобы стили для :hover и :active применялись только на устройствах с курсором, используем медиазапрос:

@media (hover: hover) {
  .btn:hover {
    /* Стили при наведении */
  }
  .btn:active {
    /* Стили при клике */
  }
}

Решение для мобильных устройств

К сожалению, псевдокласса :touch для определения нажатий на тачскринах не существует. Однако у нас есть Java Script 🙂 для обработки событий касания. Создадим стили которые будем применять при касании:

.touch {
	transform: scale(0.7);
}

С помощью JS ищем нашу кнопку, вешаем на неё обработчики событий и добавляем класс при касании

Одна кнопка:

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

// Добавляем класс touch при нажатии 
btn.addEventListener('touchstart', function (event) {
  event.currentTarget.classList.add('touch');
});

// Удаляем класс touch при отпускании 
btn.addEventListener('touchend', function (event) {
  event.currentTarget.classList.remove('touch');
});

Если кнопок много:

const btns = [...document.querySelectorAll('.btn')];

btns.forEach(btn => {
    btn.addEventListener('touchstart', function (event) {
        event.currentTarget.classList.add('touch');
    });
    btn.addEventListener('touchend', function (event) {
        event.currentTarget.classList.remove('touch');
    });
})