Comment vérifier que le navigateur prend en charge Touchstart à l'aide de JS / jQuery?

Question

Dans une tentative de suivre les meilleures pratiques, nous essayons d'utiliser le bon de JavaScript/jQuery événements en fonction de ce périphérique que vous utilisez. Par exemple, nous construisons un site mobile qui a une balise qui auront un onclick ou d'événement tactile. Dans le cas d'un iPhone, nous aimerions utiliser les "évènements touchstart" de l'événement. Nous aimerions tester si leur appareil prend en charge les "évènements touchstart" avant de nous lier que gestionnaire de l'objet. Si elle ne le fait pas, nous allons lier "onclick" à la place.

Quelle est la meilleure façon de le faire?

Answer 1

Vous pouvez détecter si l'événement est pris en charge par:

 if ('ontouchstart' in document.documentElement) {
  //...
}
 

Donne un coup d'oeil à cet article:

• Détection de la prise en charge d'événements sans détection de navigateur

La fonction isEventSupported publiée ici est vraiment bonne pour détecter une grande variété d’événements et elle est multi-navigateur.

Answer 2

Utilisez ce code pour détecter si l'appareil prend en charge les toucher.

Aussi travailler pour windows 8 IE10 qui utilise le MSPointerDown de l'événement au lieu de "touchmove'

var supportsTouch = false;
if ('ontouchstart' in window) {
    //iOS & android
    supportsTouch = true;
} else if(window.navigator.msPointerEnabled) {
    //Win8
    supportsTouch = true;
}

Answer 3

Vous pouvez vérifier si typeof document.body.ontouchstart == "undefined" à l'automne de retour à la normale d'événements dom

Answer 4

J'ai fait un plein de démonstration qui fonctionne dans tous les navigateurs avec le code source complet de la solution de ce problème: Détecter les appareils à écran tactile en Javascript.