Обрабатываем нажатия. Используем touchstart, touchmove, touchend в jQuery.

pic2В качестве упражнения по JavaScript и jQuery сделал слайдер (ползунок). Сделал более-менее законченный, функциональный вариант, который при движении ручки ползунка записывает значение в переменную data-value. Запустил это дело на айпаде, и погрустнел. Там оно не работало. Начал копать. Оказалось, что основными событиями на тач-девайсах являются touchstart, touchmove, touchend.

Событие Click там тоже есть, но оно эмулируется с задержкой в одну треть секунды. Переписал функции, просто добавив соответственные «тачевые» события. Не заработало. Начал разбираться. При клике (и при движении мышки, и при нажатии клавиши мышки) обработчику события передаётся объект «event». Это нормализованный jquery объект. Из этого объекта я использую свойства clientX, pageX, target для вычисления места клика мышкой. Но при тачевых событиях jQuery возвращает объект Event, в котором не определены нужные свойства. Просто напросто, для представления тачевых событий браузер использует другой объект, для того, чтобы хранить информацию сразу о нескольких касаниях. К счастью, jQuery предоставляет доступ к этому самому оригинальному объекту Touch, он содержится в свойстве «originalEvent» объекта Event. Соответственно, чтобы получить координаты точки касания, берём event.originalEvent.touches[0].clientX, event.originalEvent.touches[0].pageX, так же можно использовать event.originalEvent.changedTouches[0].clientX и event.originalEvent.changedTouches[0].pageX. Массив touches представляет все активные точки касания. Массив changedTouches представляет точки касания, состояние которых изменилось между предыдущем и текущем событиями.
Примеры кода.

Обработчик нажатия клавиши мышки:

$(document).on("mousedown", ".slider-handle", function(event) {
                var offset = (event.offsetX || event.clientX - $(event.target).offset().left);
                console.log(offset);
            }

Переделываем под поддержку нажатий:

$(document).on("touchstart  mousedown", ".slider-handle", function(event) {
            //если касание, то вычисляем через event.originalEvent.touches[0]:
            if (event.type == "touchstart") {
                var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
                var offset = (touch.clientX - $(event.target).offset().left);
            }
            else {
            //если нажата кнопка мышки:
                var offset = (event.offsetX || event.clientX - $(event.target).offset().left);
            }
            console.log(offset);
            //отменяем "всплытие сообщений", чтобы не вызывался клик на тач-устройствах.
            event.stopPropagation();
            event.preventDefault();
}

По аналогии можно обрабатывать сразу несколько нажатий.
Подробнее про обработку нажатий можно почитать в официальной документации mozilla.

Добавить комментарий

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.