215 votes

Comment lier ' touchstart ' et ' clic ' événements mais ne réagit pas à la fois ?

Je travaille sur un site web mobile, qui doit travailler sur une variété de dispositifs. L'un de me donner un mal de tête à l'heure actuelle sont de BlackBerry.

Nous avons besoin de soutenir à la fois les clics du clavier ainsi que les événements tactiles.

Idéalement, je voudrais simplement utiliser:

$thing.click(function(){...})

mais le problème, nous sommes en cours d'exécution en est que certains de ces appareils blackberry ont une très ennuyeux délai entre le moment de l'impulsion de déclenchement d'un clic.

Le remède est d'utiliser à la place évènements touchstart:

$thing.bind('touchstart', function(event){...})

Mais comment dois-je aller sur la liaison de ces deux événements, mais seulement de tir? J'ai encore besoin de l'événement click pour les claviers, mais bien sûr, ne veulent pas l'événement click de tir si je suis en utilisant un périphérique tactile.

Une question bonus: Est-il de toute façon pour ce faire, et en outre accueillir les navigateurs qui n'ont même pas un évènements touchstart événement? Dans cette recherche, il ressemble à BlackBerry os 5 ne prend pas en charge évènements touchstart permettra également besoin de s'appuyer sur les événements de clic pour que le navigateur.

ADDENDUM:

Peut-être une façon plus globale la question est:

Avec jQuery, est-il possible/recommandé pour traiter à la fois les interactions tactiles et les interactions de la souris avec les mêmes raccourcis clavier?

Idéalement, la réponse est oui. Sinon, j'ai quelques options:

1) Nous utilisons WURFL pour obtenir des informations sur l'appareil afin de pouvoir créer nos propres de la matrice de périphériques. Selon l'appareil, nous allons utiliser les évènements touchstart OU cliquez sur.

2) Détecter pour la prise en charge tactile dans le navigateur via JS (j'ai besoin de faire plus de recherche sur ce point, mais il semble que c'est faisable).

Cependant, ce qui laisse tout de même un problème: que faire sur les périphériques qui prennent en charge les DEUX. Certains des téléphones nous (à savoir les Nokias et Mûres) ont tous les deux écrans tactiles et claviers. Donc, ce genre de me prend cercle complet à la question d'origine...est-il un moyen de permettre aux deux à la fois, en quelque sorte?

144voto

Mottie Points 31167

Lier à la fois, mais faire un drapeau, alors la fonction se déclenche seulement une fois par 100ms ou alors.

73voto

Rafael Fragoso Points 493

C'est le correctif que je "crée" et qui supprime le GhostClick et implémente le FastClick. Essayez vous-même et dites-nous si cela a fonctionné pour vous.

 $(document).on('touchstart click', '.myBtn', function(event){
        event.stopPropagation();
        event.preventDefault();
        if(event.handled !== true) {

            // Do your magic here.

            event.handled = true;
        } else {
            return false;
        }
});
 

48voto

swooter Points 337

Vous pourriez essayer quelque chose comme ça:

 var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);
 

42voto

Jonathan Points 1198

Habituellement, cela fonctionne aussi bien:

 $('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});
 

8voto

Hasanavi Points 938

J'ai réussi de la manière suivante.

Peasy facile...

 $(this).bind('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X