HTML5 : Événements Touch API
HTML5 - sémantique

Formation HTML5 : Événements Touch API -- Table des matières

  1. API basé tablette "touch" : Description de l'API
  2. Que sont les Touch Events ?
  3. Doit-on utiliser les Touch Events ?
  4. Exemples
  5. Version Microsoft : Pointer Events

API basé tablette "touch"

Que sont les Touch Events?

element.addEventListener("touchstart", touchstartfunction, false); element.addEventListener("touchmove", touchmovefunction, false); element.addEventListener("touchend", touchendfunction, false); element.addEventListener("touchcancel", touchcancelfunction, false);
Créer des listeners pour des événements tactiles

Peut-on les utiliser ?

Exemple 1: créer un curseur sur l'écran

$('.page').bind('touchmove', function() { var touch = event.targetTouches[0]; $("#pointer")[0].style.display = "block"; $("#pointer")[0].style.top = touch.pageY +"px"; $("#pointer")[0].style.left = touch.pageX +"px"; event.preventDefault(); });
Faire bouger un curseur sur l'écran tactile

Exemple 2: capturer un touché rapide

$('.page').bind('touchstart', function() { timeStart = new Date().getTime(); lastPositionMove = touch.pageX; }); $('.page').bind('touchend', function() { var now = new Date().getTime(); if (timeStart !== null) { if (now - timeStart < 400) { if (lastPositionMove + 100 < touch.pageX ) { moveToPreviousPage(); } if (lastPositionMove > touch.pageX + 100) { moveToNextPage(); } } } timeStart = null; });
Capturer un touché rapide

Pointer Events