Détection des capacités du navigateur et des événements sélectifs pour la souris et le toucher

Question

J'ai commencé à utiliser les événements tactiles pendant un moment, mais je suis tombé sur un problème. Jusqu'à présent, j'ai vérifié si les capacités tactiles sont supportées, et appliqué des événements sélectifs basés sur cela. Comme ceci:

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
} 

Cependant, mes scripts ont cessé de fonctionner dans Chrome5 (qui est actuellement beta) sur mon ordinateur. J'ai fait des recherches un peu, et comme je m'y attendais, dans Chrome5 (par opposition aux anciens Chrome, Firefox, IE, etc.) document.ontouchmove n'est plus undefined mais null. Au début, je voulais soumettre un rapport de bug, mais j'ai réalisé: Il y a des périphériques qui ont des capacités souris et tactiles, donc ça peut être naturel, peut-être que Chrome le définit parce que mon OS supporte les deux types d'évènements . Par conséquent, les solutions semblent simples: appliquer les deux types d'événement. Droite?

Eh bien, le problème a maintenant lieu sur mobile. Afin d'être rétrocompatible et de prendre en charge les scripts n'utilisant que des événements de souris, les navigateurs mobiles peuvent également essayer de les déclencher (au toucher). Ainsi, avec les deux événements mouse et touch, un certain gestionnaire peut être appelé deux fois à chaque fois.

Quelle est la manière d'aborder cela? Existe-t-il un meilleur moyen de vérifier et d'appliquer des événements sélectifs, ou dois-je ignorer les problèmes qui peuvent se produire si les navigateurs déclenchent à la fois des événements tactiles et de souris?

Answer 1

Essayez de créer un élément factice et de lui attacher un gestionnaire d'événements tactiles, puis vérifiez si le gestionnaire est de type "fonction". Ce n'est pas infaillible, car certains navigateurs autorisent les gestionnaires d'événements tactiles bien qu'ils fonctionnent sur un périphérique non tactile - mais c'est probablement aussi proche que vous le ferez. Ainsi, quelque chose comme ceci:

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
} 

Codage heureux!

Answer 2

Essayez de désactiver les événements de la souris si les événements tactiles se déclenchent?

.: par exemple

 
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events; 

Answer 3

Est-ce aussi évident?

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
} 

Answer 4

var support_touch = (type de Touch == "objet");

Answer 5

similaires à la réponse de Ola, j'ai trouvé juste un simple détecter des œuvres mais je trouve aussi que notamment les appareils Android excentriques (comme le feu de forêt) ne sont pas toujours cet événement défini - cela fonctionne bien pour moi:

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
} 

(probablement une meilleure façon de le faire :)

Answer 6

avez-Je obtenir ce mal, ou est-ce chaque poste jusqu'à présent ici répondre à une question que vous n'avez pas demandé? Au moins, vous avez maintenant des tas d'autres moyens de vérifier les événements pris en charge :)

En tout cas, en ce qui concerne votre question: Je dirais que cela dépend de ce que vous construisez. Je suppose que lorsque vous écrivez "des événements sélectifs appliqués basés sur cela", vous voulez ajouter des écouteurs et des "Hhandlers"? Aussi je suppose que vous n'avez pas affaire à multitouch (encore)?

En général, si vous souhaitez que votre application fonctionne avec les deux types d'événements d'entrée, vous n'avez pas d'autre choix que d'enregistrer les écouteurs pour tous ces types d'événements. Vous utiliserez peut-être déjà le même gestionnaire pour touchstart et mousedown, donc c'est l'endroit où je m'assurerais qu'un seul des événements identiques suivants est réellement traité (pour sauvegarder les cycles et redessiner les cpu et éviter les effets secondaires possibles). En ce qui concerne les appareils tactiles, en parlant de simple touche, je peux voir mon téléphone de niveau 10 (2.3.3) génère à la fois l'événement - les événements de la souris, donc "classique" web (tous ces onmousedown -events, etc. ..) va fonctionner, les événements tactiles ... bien, parce que c'est un appareil tactile apparemment. Mais vérifier seulement si l'API javascript supporte TouchEvents ne vous dit rien sur le périphérique d'entrée, par exemple: le navigateur rekonq sur le bureau de kubuntu renvoie true pour les exemples ci-dessus - mais ne les déclenchera jamais à moins d'utiliser un écran tactile.

Peut-être que différencier les périphériques via window.navigator.userAgent serait une approche plus réalisable?