В качестве упражнения по 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.