web-dev-qa-db-fra.com

Déterminer et lier un événement de clic ou de "toucher"

J'utilise le code ci-dessous pour lier les événements "click" ou "touchstart" (en utilisant on(eventType, function() { ... }) ) de jQuery.

var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';

Plus tard:

$foo.on(what, function() { ... });

... qui fonctionne très bien pour l'iPad et "tout le reste", mais je crains que le code ci-dessus ait une "vision tunnel iPad" ...

Ma (mes) question (s):

Est-ce que tous les autres appareils (par exemple, Android Android) ont des événements "touchstart" de même nom? Si oui, comment puis-je améliorer le code ci-dessus afin de pouvoir tenir compte de ces types d'événements?

En d'autres termes, comment puis-je prendre en compte une plus large gamme d'appareils tactiles dans le code ci-dessus (pas seulement l'iPad)?

EDIT # 1

Qu'en pensez-vous:

var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');

Remarque: La plupart de la logique ci-dessus est de Modernizr ici .

Ce qui précède semble fonctionner pour Firefox/iPad ... Je n'ai pas grand-chose d'autre à tester pour le moment.

Ce que j'aime dans ce qui précède, c'est que je ne renifle pas UA. :)

tap est-il une bonne valeur par défaut pour tous les autres appareils tactiles?

EDIT # 2

Quelques informations intéressantes ici , qui renvoie à ceci:

Création de boutons rapides pour les applications Web mobiles

Pas vraiment une réponse directe, mais donne beaucoup de détails sur la situation des développeurs face à des événements liés aux clics pour plusieurs plates-formes et appareils.

EDIT # 3

Quelques bonne info ici aussi:

Événements Android et iPhone Touch

Les versions Android et iPhone de WebKit ont des événements tactiles en commun:

touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown
touchmove - triggered when a touch moves. Mouse equivalent - mouseMove
touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below
touchcancel - bit of a mystery

Après avoir lu cela, je pense que je changerai le code ci-dessus en ceci:

var foo = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';

Lorsque j'ai posé ma question pour la première fois - n'ayant accès à rien d'autre qu'un iPad/iPhone - j'ai supposé que touchstart était un événement spécifique à iOS; il semble maintenant que touchstart et click couvriront la plupart, sinon la totalité, des bases des appareils tactiles.

Mise à jour d'août 2014:

Si cela peut vous être utile, j'ai publié quelques classes utilitaires ici:

  • mhulse/no-x.js :

    [no-js] [no-touch] Utilitaires JavaScript à insérer dans des modèles HTML qui ajouteront des classes js ou touch à utiliser en CSS et/ou JS.

javascriptandroidjqueryiphonemobile
29
mhulse

IOS et Android ont des événements tactiles, mais Windows utilise des événements MSPointer dans IE. Si vous voulez une solution multi-appareils, essayez pointer.js ou apprenez-en:

https://github.com/borismus/pointer.js

9
Cat Chen

Je vous déconseille fortement d'utiliser UA pour déterminer si vous êtes sous un environnement tactile.

Utilisez plutôt Modernizr: http://modernizr.com/ Le code ci-dessous reconnaîtrait tout sauf Windows Phone 7 car Windows Phone 7 ne déclenche pas les événements tactiles habituels du navigateur. Cependant, WP8 serait très probablement reconnu correctement.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
13
Konstantin Dinev

Cela peut fonctionner pour vous:

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
12
Sky Yip