HTML5 : Événements Touch API
Formation HTML5 : Événements Touch API -- Table des matières
- API basé tablette "touch" : Description de l'API
- Que sont les Touch Events ?
- Doit-on utiliser les Touch Events ?
- Exemples
- Version Microsoft : Pointer Events
API basé tablette "touch"
- Ce n'est pas encore standardisé
- Événements touchstart, touchend, touchend
- Élement DOM : pageX, pageY, touches, targetTouches, changedTouches, Android et iOS
- iOS prend en charge aussi des gesture (gesturestart, gestureend, gesturechange)
- Sur iOS, il est possible d'ajouter à l'écran d'accueil et utiliser une page Web comme application
- Prend en charge le cache manifest
Que sont les Touch Events?
- L'API Touch Events fonctionne comme tous les autres événements
- Peut capturer l'interaction mutli-touché sur les écran tactiles
- Maintenant défini au W3C (Candidate Recommendation depuis Juillet 2012):
http://www.w3.org/TR/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 ?
- Depuis Juillet 2012, la plupart des navigateurs mobiles iOS et Android le prennent en charge
- Certaines limitations sur Android (gesture)
- Fonctionne aussi sur la Playstation Vita !
- Faites attention à l'utilisabilité et l'accessibilité, car ceux-ci peuvent surcharger des événements nécessaires (défilement, etc.)
Exemple 1: créer un curseur sur l'écran
- Cet exemple utilise JQuery peut gérer les événements
$('.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
- MSPointerDown
- MSPointerMove
- MSPointerUp
- MSPointerOver
- MSPointerOut
- MSPointerHover