Javascript: évènements touch et gestures

Écrit par Benske. Posted in HTML5 et CSS3

Je me demandais si c'était possible, en Javascript, d'écouter aux évènements spécifiques aux écrans tactiles comme les smartphones et tablettes (ces évènements sont appelés touch events et gesture events). Et bien oui: c'est possible (sur iPhone / iPad / Android).

On peut capter ces évènements un peu comme on capte un évènement click dans le navigateur. Voici un petit exemple:
document.removeEventListener('touchstart', doSomeLogging, false); // activé dès que le doigt touche l'écran
document.addEventListener('touchend', doSomeLogging, false); // activé dès que le doigt ne touche plus l'écran (logique n'est-ce pas) 

Cela doit sans doute vous sembler familier si vous avez une connaissance de javascript. Document peut être remplacé par n'importe quel objet bien évidemment. 

Il y a également un 3ème touch event: le move event:
document.getElementById(''unid).addEventListener('touchmove', doSomeLogging, false); // activé lorsque on bouge le doigt sur l'écran


Le problème avec ces nouveaux évènements est qu'on ne peut pas les tester dans un navigateur normal: un navigateur ne connaît pas ces évènements. Heureusement il y a une librairie Javascript qui offre cette possibilité de simuler ces évènements dans un navigateur: Phantom Limb (démo). Vous pouvez télécharger cette library sur Github.

Google+

Suivez Mess-Land sur Google+ et restez informé sur la musique, l'actualité, les sports et le multimédia.

Et Facebook