Détecter les appareils à écran tactile avec Javascript

Dans Javascript / jQuery, comment puis-je détecter si le périphérique client a une souris?

J'ai un site qui fait glisser un petit panneau d'informations lorsque l'utilisateur passe la souris sur un élément. J'utilise jQuery.hoverIntent pour détecter le survol, mais cela ne fonctionne évidemment pas sur les appareils à écran tactile comme iPhone / iPad / Android. Donc, sur ces appareils, je voudrais revenir au toucher pour afficher le panneau d'informations.

+1 pour faire hoveret les clickdeux. Une autre façon pourrait être d'utiliser des requêtes multimédias CSS et d'utiliser certains styles uniquement pour les petits écrans / appareils mobiles, qui sont les plus susceptibles d'avoir une fonctionnalité tactile / tap. Donc, si vous avez des styles spécifiques via CSS, et à partir de jQuery, vous vérifiez ces éléments pour les propriétés de style d'appareil mobile, vous pouvez les accrocher pour écrire votre code spécifique au mobile.

Voir ici: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Remarque : ce n'est pas parce qu'un appareil prend en charge les événements tactiles qu'il s'agit exclusivement d'un appareil à écran tactile. De nombreux appareils (tels que mon Asus Zenbook) prennent en charge à la fois les événements de clic et de toucher, même s'ils ne disposent pas de mécanismes de saisie tactile. Lors de la conception de la prise en charge tactile, incluez toujours la prise en charge des événements de clic et ne supposez jamais qu'un périphérique est exclusivement l'un ou l'autre.

Test trouvé pour window.Touch ne fonctionnait pas sur Android, mais cela fonctionne:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Voir l'article: Quelle est la meilleure façon de détecter un appareil à «écran tactile» à l'aide de JavaScript?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Raison de l'utilisation de maxTouchPoints avec msMaxTouchPoints:

Microsoft a déclaré qu'à partir d'Internet Explorer 11, la version préfixée par le fournisseur Microsoft de cette propriété (msMaxTouchPoints) peut être supprimée et recommande d'utiliser à la place maxTouchPoints.

Source: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Fonctionne partout !!

J'utilise:

if(jQuery.support.touch){
    alert('Touch enabled');
}

dans jQuery mobile 1.0.1

Google Chrome semble renvoyer de faux positifs sur celui-ci:

var isTouch = 'ontouchstart' in document.documentElement;

Je suppose que cela a quelque chose à voir avec sa capacité à "émuler les événements tactiles" (F12 -> paramètres dans le coin inférieur droit -> onglet "substitutions" -> dernière case à cocher). Je sais qu'il est désactivé par défaut, mais c'est ce à quoi je connecte la modification des résultats (la méthode «in» utilisée pour fonctionner dans Chrome). Cependant, cela semble fonctionner, d'après ce que j'ai testé:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Tous les navigateurs sur lesquels j'ai exécuté ce code indiquent que le type est "objet" mais je suis plus sûr de savoir que c'est quelque chose mais non défini :-)

Testé sur IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome pour iPad 21.0.1180.80 et iPad Safari. Ce serait cool si quelqu'un faisait d'autres tests et partageait les résultats.

J'ai écrit ceci pour l'un de mes sites et c'est probablement la solution la plus infaillible. D'autant plus que même Modernizr peut obtenir des faux positifs sur la détection tactile.

Si vous utilisez jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

ou juste du pur JS ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Pour mon premier post / commentaire: Nous savons tous que le 'touchstart' est déclenché avant le clic. Nous savons également que lorsque l'utilisateur ouvrira votre page, il ou elle: 1) déplacera la souris 2) cliquera 3) touchera l'écran (pour faire défiler, ou ... :))

Essayons quelque chose:

// -> Démarrer: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- Fin: jQuery

Bonne journée!

J'ai testé le code suivant mentionné ci-dessus dans la discussion

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

fonctionne sur Android Mozilla, chrome, Opera, navigateur par défaut Android et safari sur iphone ... tous positifs ...

me semble solide :)

Un article de blog utile sur le sujet, lié à partir de la source Modernizr pour détecter les événements tactiles. Conclusion: il n'est pas possible de détecter de manière fiable les appareils à écran tactile à partir de Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Cela fonctionne pour moi:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Si vous utilisez Modernizr , il est très facile à utiliser Modernizr.touchcomme mentionné précédemment.

Cependant, je préfère utiliser une combinaison de Modernizr.touchtests et de tests d'agent utilisateur, juste pour être sûr.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Si vous n'utilisez pas Modernizr, vous pouvez simplement remplacer la Modernizr.touchfonction ci-dessus par('ontouchstart' in document.documentElement)

Notez également que le test de l'agent utilisateur iemobilevous donnera une plus large gamme d'appareils mobiles Microsoft détectés que Windows Phone.

Voir aussi cette question SO

Dans jQuery Mobile, vous pouvez simplement faire:

$.support.touch

Je ne sais pas pourquoi c'est si non documenté ... mais c'est sûr pour crossbrowser (2 dernières versions des navigateurs actuels).

Comme déjà mentionné, un appareil peut prendre en charge à la fois la souris et l'entrée tactile. Très souvent, la question n'est pas "ce qui est pris en charge" mais "ce qui est actuellement utilisé".

Dans ce cas, vous pouvez simplement enregistrer les événements de souris (y compris l'écouteur de survol) et les événements tactiles.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript doit automatiquement appeler le bon auditeur en fonction de l'entrée de l'utilisateur. Donc, en cas d'événement tactile,onTouchStartCallback sera déclenché, émulant votre code de survol.

Notez qu'un toucher peut déclencher les deux types d'auditeurs, tactile et souris. Cependant, l'écouteur tactile passe en premier et peut empêcher les écouteurs de souris suivants de se déclencher en appelant event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Lectures complémentaires ici .

Pour le développement iPad, j'utilise:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

Je peux ensuite me lier sélectivement aux événements tactiles (par exemple ontouchstart) ou aux événements basés sur la souris (par exemple onmousedown). Je n'ai pas encore testé sur Android.