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

Différent des pointer events CSS
Prend en charge la souris, le touché, les crayons, etc
Soumis au W3C : http://www.w3.org/Submission/pointer-events/

MSPointerDown
MSPointerMove
MSPointerUp
MSPointerOver
MSPointerOut
MSPointerHover