Comment puis-je détecter le support tactile de l'appareil en JavaScript?

Dans le passé, lors de la détection de savoir si un périphérique prend en charge les événements tactiles en JavaScript, on peut faire quelque chose comme ceci:

var touch_capable = ('ontouchstart' in document.documentElement);

Cependant, Google Chrome (17.x.x+) renvoie true pour la vérification ci-dessus, même si le périphérique ne prend pas en charge les événements tactiles. Par exemple, l'exécution du code ci-dessus sur Windows 7 renvoie la valeur true, et donc si nous le combiner avec quelque chose comme:

var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown';

Sur Google Chrome, l'événement n'est jamais tiré depuis que nous sommes liaison à ontouchstart. En bref, quelqu'un sait-il un moyen fiable pour contourner cela? Je suis actuellement en cours d'exécution à cocher suivantes:

var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1)

Qui est loin d'être idéal...

source d'informationauteur BenM

  1. 9

    La réponse correcte est de gérer les deux types d'événements - ils ne sont pas mutuellement exclusives.

    De plus pour un test fiable pour le support de toucher, de regarder aussi pour window.DocumentTouch && document instanceof DocumentTouch qui est l'un des tests utilisés par Modernizr

    Mieux encore, il suffit d'utiliser Modernizr vous-même et de le laisser prendre la détection de fonctionnalité pour vous.

    Notez bien que vous ne pouvez pas éviter les faux positifs, d'où ma première ligne ci - dessus vous avez ai pour soutenir à la fois.

  2. 5

    C'est une modification de la façon dont Modernizr effectue de détection tactile, avec ajout du support pour le travail avec IE10+ touch.

    var isTouchCapable = 'ontouchstart' in window ||
 window.DocumentTouch && document instanceof window.DocumentTouch ||
 navigator.maxTouchPoints > 0 ||
 window.navigator.msMaxTouchPoints > 0;

    Ce n'est pas à toute épreuve depuis la détection d'un périphérique tactile est apparemment une impossibilité.

    Votre kilométrage peut varier:

    • Anciens appareils à écran tactile uniquement émuler les événements de la souris
    • Certains navigateurs & OS configurations peuvent permettre de toucher Api quand pas d'écran tactile est connecté
    • Dans un hybride de la souris/tactile/pavé tactile/stylo/clavier de l'environnement, ce n'est pas indiquer d'entrée qui est utiliséseulement que le navigateur est délicatil ne détecte si le navigateur pourrait accepter ou de simuler une saisie tactile. Par exemple, un utilisateur peut passer de l'utilisation d'une souris pour toucher l'écran tactile de l'ordinateur portable ou la souris-tablette connecté à tout moment.

    Mise à jour:
    Un conseil: Ne pas utiliser les fonctionnalités tactiles de détection de contrôle & spécifier les comportements de l'INTERFACE utilisateur, l'utilisation des écouteurs d'événement au lieu. Conception pour le clic/touch/événement keyup, pas l'appareil, touchez-la capacité de détection est généralement utilisé pour enregistrer le cpu/mémoire de frais de l'ajout d'un écouteur d'événement. Un exemple de détection tactile pourrait être utile et approprié:

    if (isTouchCapable) {
    document.addEventListener('touchstart', myTouchFunction, false); 
}
  3. 0

    Vous devriez envisager d'utiliser le bien testé (et cross-browser) de Modernizr test.

    À partir de leur site:

    //bind to mouse events in any case

if (Modernizr.touch){
   //bind to touchstart, touchmove, etc and watch `event.streamId`
}

    http://modernizr.github.com/Modernizr/touch.html

  4. 0

    Bien vieille question, mais d'avoir à le faire sans une bibliothèque, j'ai créé la solution suivante -- simplement laisser les événements de parler pour eux d'auto -- quand vous voyez le touch événements, il suffit de désactiver le traitement de la mouse événements.

    Dans coffescript est ressemblerait à ceci;

               hasTouch = false
           mouseIsDown = false
           @divs.on "touchstart", (e)->
              hasTouch = true
              touchstart(e.timeStamp,e.originalEvent.touches[0].pageX);
              return true
           @divs.on "mousedown", (e)->
              mouseIsDown = true;
              touchstart(e.timeStamp,e.clientX) if not hasTouch
              return true

           @divs.on 'touchmove', (e) ->
              touchmove(e.timeStamp,e.originalEvent.touches[0].pageX);
              return true;
           @divs.on 'mousemove', (e) ->
              touchmove(e.timeStamp,e.clientX) if mouseIsDown and not hasTouch 
              return true;

           @divs.on 'touchend', (e) ->
              touchend();
              return true
           @divs.on 'mouseup', (e) ->
              mouseIsDown = false;
              touchend() if not hasTouch
              return true

    La juste définir des fonctions pour touchstart,move et end contenant la logique réelle....