Éliminer les retards de 300 ms sur les événements liés aux clics dans Safari mobile

Question

J'ai lu que le navigateur Safari mobile a un 300ms retard sur les événements à partir du moment où le lien/bouton est cliqué pour le temps de l'événement est déclenché. La raison de ce retard est d'attendre de voir si l'utilisateur a double-clic, mais à partir d'un UX perspective d'attente 300ms est souvent indésirable.

Une solution pour éliminer ce 300ms retard est d'utiliser jQuery Mobile "sur" la manipulation. Malheureusement, je ne suis pas familier avec ce cadre et ne voulez pas charger certains gros cadre si j'ai besoin d'une ou deux lignes de code en appliquant touchend dans le droit chemin.

Comme beaucoup de sites, mon site a beaucoup de cliquez sur événements comme ceci:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

et ce que je voudrais faire est de se débarrasser de la 300ms retard sur TOUS ces événements de clic à l'aide d'un unique fragment de code comme ceci:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

Est-ce une mauvaise/bonne idée?

Answer 1

Maintenant, certains navigateurs mobiles éliminer de 300 ms, cliquez sur le retard si vous définissez la fenêtre d'affichage. Vous n'avez pas besoin d'utiliser des solutions de contournement plus.

<meta name="viewport" content="width=device-width, user-scalable=no">

C'est actuellement pris en charge Chrome pour Android et Firefox pour Android

Cependant sur iOS Safari, double-tap est un geste de défilement sur unzoomable pages. Pour cette raison, ils ne peuvent pas supprimer les 300ms retard. S'ils ne peuvent pas supprimer le délai sur unzoomable pages, ils sont peu à le retirer sur zoomable pages.

Windows phone conserve la 300ms de retard sur unzoomable pages, mais ils n'ont pas une solution de rechange geste comme iOS il est donc possible de supprimer ce délai que le Chrome. Vous pouvez supprimer le délai à l'aide de:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Source: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

Answer 2

Ce plugin -FastClick développé par Financial Times le fait parfaitement pour vous!

Assurez-vous cependant d’ajouter event.stopPropagation(); et / ou event.preventDefault(); directement après la fonction click, sinon cela pourrait fonctionner deux fois plus vite que pour moi, c’est-à-dire:

 $("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});
 

Answer 3

Je sais que c'est vieux, mais ne pouvez-vous pas simplement tester pour voir si "touch" est pris en charge dans le navigateur? Créez ensuite une variable "touchend" ou "click" et utilisez-la comme événement lié à votre élément?

 var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});
 

Ainsi, cet exemple de code vérifie si l'événement "touchend" est pris en charge dans le navigateur. Sinon, nous utilisons l'événement "click".

(Edit: changé "touchend" en "ontouchend")

Answer 4

J'ai rencontré un très populaire alternative appelée Hammer.js (Github page) qui, je pense, est la meilleure approche.

Hammer.js est un plus complet touch library (a de nombreuses commandes de balayage) que Fastclick.js (la plupart des upvoted réponse).

Attention cependant: le défilement rapide sur les appareils mobiles a tendance à vraiment de verrouillage de l'INTERFACE utilisateur lorsque vous utilisez Hammer.js ou Fastclick.js. C'est un problème majeur si votre site a un fil de dépêches ou d'une interface où les utilisateurs seront en défilement beaucoup (qui semblent comme la plupart des web apps). Pour cette raison, je ne suis aucune de ces plugins pour le moment.

Answer 5

En quelque sorte, la désactivation du zoom semble désactiver ce petit retard. De sens, comme un double-tap n'est plus nécessaire ensuite.

Comment puis-je "désactiver" zoom sur une page web mobile?

Mais s'il vous plaît être conscient de la convivialité impact que cela va avoir. Il peut être utile pour les pages web conçues comme des applications, mais ne doit pas être utilisé pour des fins plus générales "statique" des pages à mon humble avis. Je l'utilise pour un projet de compagnie qui a besoin d'une faible latence.