Обработка Touch событий

Допустим у меня на странице есть элемент

<div id="block1">block1</div>

я его беру

var block1 = document.getElementById('block1');

и могу делать с ним все что угодно.

touchstart3

Первое событие, которое возникает при каждом прикасновении к объекту на экране это touchstart.
Подцеплю слушатель события touchstart к элементу block1.

block1.addEventListener('touchstart', function(event) {
  block1.className = 'touched'; // Меняем класс
  block1.innerHTML = 'touched'; // Меняем содержимое
}, false);

touchmove

Основная активность происхоит в обработчике события touchmove. Это событие срабатывает постоянно до тех пор, пока мы не перестанем таскать объект и не отпустим его.

block1.addEventListener('touchmove', function(event) {
  var x = event.touches[0].pageX; // Собираем данные
  var y = event.touches[0].pageY; // и еще
  block1.style.left = x - 100; // Корректируем погрешность
  block1.style.top = y - 50;   // и еще
  block1.innerHTML = 'touchmove'; // Пишем что происходит с элементом
}, false);

touchend

Событие touchend всплывает каждый раз когда мы отпускаем палец от сенсорной поверхности.

block1.addEventListener('touchend', function(event) {
  block1.className = '';
  block1.innerHTML = 'dropped';
}, false);

Работоспособная демка для мобильных браузеров.

Ссылки:
Документация для iOS, но работает и на браузерах в Android.
Серия статей на сайте David B. Calhoun
Черновик спецификации по Touch Events на сайте W3C

Статья взята с сайта http://y3x.ru/