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

22.10.2017
touchstart event

Для добавления объекту класса при касании дисплея мобильного устройства необходимо перехватить событие 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');
  }
});

 

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

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

− 4 = 3