Добавляем класс при событии touchstart

Для добавления объекту класса при касании дисплея мобильного устройства необходимо перехватить событие touchstart.
Чтобы проследить событие касания в консоли добавьте следующий скрипт:

$('.class').on('touchstart', function (e) {
console.log(e.type);
});

Чтобы перехватить событие прекращения касания на выбранном блоке добавьте:

$('.class').on('touchend', function (e) {
console.log(e.type);
});

В консоли можно проследить событие.

И ещё одно событие — перемещение пальца из области выбранного объекта:

$('.class').on('touchmove', function (e) {
console.log(e.type);
});

Итак, если вам необходимо добавить класс объекту при касании и удалить при отрывании пальца (например имитировать «ховер» эффект). Добавьте в ваш .js файл следующий код:

var $hoverClass = $('.vash-class');
$hoverClass.on('mousedown touchstart', function (e) {
    if (e.type === 'touchstart') {
    $(this).addClass('hovered');
  }
});
$hoverClass.on('mouseup touchend', function (e) {
    if (e.type === 'touchend') {
    $(this).removeClass('hovered');
  }
});
$hoverClass.on('mouseup touchmove', function (e) {
    if (e.type === 'touchmove') {
    $(this).removeClass('hovered');
  }
});

Если данный способ используется для имитации ховер эффекта, в файле стилей удалите ховер эффект для мобильных устройств медиа запросом.