Comment vérifier la prise en charge du démarrage par navigateur dans JS / jQuery?
Afin de suivre les meilleures pratiques, nous essayons d'utiliser les événements JavaScript/jQuery appropriés en fonction de l'appareil que vous utilisez. Par exemple, nous créons un site mobile doté d'une balise qui comportera un événement onclick ou touch. Dans le cas d'un iPhone, nous aimerions utiliser l'événement "touchstart". Nous aimerions tester si leur appareil prend en charge "touchstart" avant de lier ce gestionnaire à l'objet. Si ce n'est pas le cas, nous lierons plutôt "onclick".
Quelle est la meilleure façon de procéder?
Vous pouvez détecter si l'événement est pris en charge par:
if ('ontouchstart' in document.documentElement) {
//...
}
Jetez un oeil à cet article:
La fonction isEventSupported publiée ici, est vraiment bonne pour détecter une grande variété d'événements, et elle est multi-navigateur.
Utilisez ce code pour détecter si l'appareil prend en charge le toucher.
Fonctionne également pour Windows 8 IE10 qui utilise l'événement "MSPointerDown" au lieu de "touchmove"
var supportsTouch = false;
if ('ontouchstart' in window) {
//iOS & Android
supportsTouch = true;
} else if(window.navigator.msPointerEnabled) {
// Windows
// To test for touch capable hardware
if(navigator.msMaxTouchPoints) {
supportsTouch = true;
}
}
Vous pouvez vérifier si typeof document.body.ontouchstart == "undefined" pour revenir aux événements dom normaux
J'ai fait une démonstration complète qui fonctionne dans chaque navigateur avec le code source complet de la solution de ce problème: Détecter les appareils à écran tactile en Javascript .