Lors de mon stage à Uzik, j’ai du mettre en place un site iPad puis iPhone. J’ai alors été confronté à une question importante : comment gérer les « mouse events » sur les terminaux mobiles ? Tout simplement en utilisant les événements « touch » et « gesture » (appelés respectivement « touch events » et « gesture events ». Ces événements s’utilisent presque de la même manière que les événements « mouse » pour un ordinateur.
Les événements « touch »
Les « touch events » remplacent les « mouse events » sur les terminaux tactiles, bien que ces derniers fonctionnent toujours. Ils sont au nombre de trois :
- touchstart (≈ mousedown) : s’amorce lorsqu’un doigt touche l’écran
- touchmove (≈ mousemove) : s’amorce lorsqu’un doigt touche l’écran puis se déplace
- touchend (≈ mouseup) : s’amorce lorsqu’un doigt quitte l’écran
Ces « touch events » n’ont pas encore été intégrés à jQuery (je ne parle pas de jQuery Mobile) et s’initialisent donc avec les fonctions « bind » ou « live ».
Les événements « gesture »
Les « gesture events » n’ont pas d’équivalents sur ordinateur. Ils permettent de contrôler le zoom ou la rotation sur un élément. Ils sont au nombre de trois :
- gesturestart : s’amorce lorsqu’au moins deux doigts touchent l’écran
- gesturechange : s’amorce lorsqu’au moins deux doigts bougent sur l’écran
- gestureend : s’amorce lorsqu’au moins deux doigts quittent l’écran
De même, ces « gesture events » s’initialisent avec les fonctions « bind » ou « live ».
Comment les mettre en place
Les « touch events » et « gesture events » fonctionnent au final comme les « mouse events ». Il faut initialiser une variable « event » par exemple, qui va permettre de récupérer les propriétés associées, comme le nombre de doigts sur l’écran, leur position …
$(‘element’).bind(‘touchstart’, function(event){
var e = event.originalEvent ;
event.preventDefault() ;
var firstFinger = e.touches.pageX ;
}) ;
$(‘element’).bind(‘gesturechange’, function(event){
var e = event.originalEvent ;
event.preventDefault() ;
$(this).css(‘-webkit-transform’, ‘scale(‘+e.scale+’)’) ;
}) ;
En créant une variable égale à “event.originalEvent”, on a donc accès aux propriétés comme la position en x du premier doigt (e.touches[0].pageX) ou le facteur de multiplication pour le zoom (e.scale). Il est intéressant de toujours appeler la fonction « event.preventDefault() » qui est un peu un équivalent du « return false ». Sauf que cet appel peut être effectué n’importe où dans la fonction, contrairement au « return false ».
Les terminaux mobiles optimisés pour Webkit
Comme vous l’avez vu pour le zoom, j’utilise la propriété CSS3 « -webkit-transform ». En effet, on aurait pu jouer avec le « height » et le « width » de l’élément, mais d’une part c’est plus long à faire, et d’autre part, l’appel au moteur graphique de Webkit est beaucoup plus optimisé. De même, pour un slider par exemple, plutôt qu’utiliser la position relative ou bien les marges, il est très recommandé d’utiliser la propriété « -webkit-transform : translate3d(x,y,z) ».
Toutes les propriétés de Webkit.
Doc Apple pour Javascript sur iPhone.
