en / ru

Javascript touch events

Для touch-девайсов доступны следующие события:

  • touchstart
  • touchend
  • touchcancel
  • touchleave
  • touchmove

Добавление обработчиков на нативном JS

function startup() {
  var el = document.getElementsByTagName("body")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);
}

Определение координат touch событий

В нативном JS:
x = e.touches[0].pageX;
y = e.touches[0].pageY;
В jQuery:
x = e.originalEvent.touches[0].pageX;
y = e.originalEvent.touches[0].pageY;

Отмена "pull to refresh" в мобильных браузерах

Наверняка вы уже встречали такую полезную фичу, когда дергаешь окно браузера/приложения вниз и страница/приложение обновляет данные. Например, так работает мобильный Twitter.

Вот только подобное поведение является полезным лишь пока оно является задумкой автора. В мобильном Google Chrome с версии 41 такое поведение включено по-умолчанию и работает для любой веб-страницы.

Отключается такое самовольство просто: в touchmove прописываем e.preventDefault();

А вот если хотите добавить подобный функционал там, где он недоступен (в том числе и на десктопных браузрах), можно использовать Hook.js:
https://github.com/jordansinger/hook.js

Определение направления swipe

touch swipe action

Swipe буквально означает "проводить не отрывая", "скользить". Является особой возможностью взаимодействия пользователя и приложения, когда пользователь касается экрана пальцем/стилусом и, не отрывая пальца/стилуса, "скользит" по сенсорному экрану устройства.

Swipe обычно используется для прокрутки содержимого. Также часто используется для горизонтальной прокрутки "каруселей", заменяя клики по элементам навигации.

Пример определения направления swipe.
Тот же пример определения направления swipe, но на jQuery.

Полезные ссылки:

Browser Input Events: Can We Do Better Than The Click?