Éliminez le délai de 300 ms sur les événements de clic dans Safari mobile

J'ai lu que Safari mobile a un délai de 300 ms sur les événements de clic entre le moment où le lien / bouton est cliqué et le moment où l'événement se déclenche. La raison du retard est d'attendre de voir si l'utilisateur a l'intention de double-cliquer, mais du point de vue UX, attendre 300 ms est souvent indésirable.

Une solution pour éliminer ce délai de 300 ms consiste à utiliser la gestion «tap» de jQuery Mobile. Malheureusement, je ne suis pas familier avec ce framework et je ne veux pas charger un gros framework si tout ce dont j'ai besoin est une ligne ou deux de code s'appliquant touchendde la bonne manière.

Comme de nombreux sites, mon site comporte de nombreux événements de clic comme celui-ci:

$("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 j'aimerais faire, c'est supprimer le délai de 300 ms sur TOUS ces événements de clic en utilisant un seul extrait de code comme celui-ci:

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

Est-ce une mauvaise / bonne idée?

Désormais, certains navigateurs mobiles éliminent un délai de clic de 300 ms si vous définissez la fenêtre. Vous n'avez plus besoin d'utiliser des solutions de contournement.

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

Ceci est actuellement pris en charge Chrome pour Android , Firefox pour Android et Safari pour iOS

Cependant, sur iOS Safari , le double-tap est un geste de défilement sur des pages non zoomables. Pour cette raison, ils ne peuvent pas supprimer le délai de 300 ms . S'ils ne peuvent pas supprimer le délai sur les pages non zoomables, il est peu probable qu'ils le suppriment sur les pages zoomables.

Les téléphones Windows conservent également le délai de 300 ms sur les pages non zoomables, mais ils n'ont pas de geste alternatif comme iOS, il leur est donc possible de supprimer ce délai comme Chrome l'a fait.Vous pouvez supprimer le délai sur Windows Phone en utilisant:

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

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

UPDATE 2015 Décembre

Jusqu'à présent, WebKit et Safari sur iOS avaient un délai de 350 ms avant que les simples tapotements activent des liens ou des boutons pour permettre aux gens de zoomer sur les pages avec un double tap. Chrome a déjà changé cela il y a quelques mois en utilisant un algorithme plus intelligent pour détecter cela et WebKit suivra une approche similaire . L'article donne de très bons aperçus sur la manière dont les navigateurs fonctionnent avec les gestes tactiles et sur la façon dont les navigateurs peuvent encore devenir beaucoup plus intelligents qu'ils ne le sont aujourd'hui.

MISE À JOUR 2016 Mars

Sur Safari pour iOS, le temps d'attente de 350 ms pour détecter un deuxième tap a été supprimé pour créer une réponse «rapide». Ceci est activé pour les pages qui déclarent une fenêtre avec width = device-width ou user-scalable = no. Les auteurs peuvent également opter pour un comportement de tapotement rapide sur des éléments spécifiques en utilisant le CSS touch-action: manipulationcomme documenté ici (faites défiler jusqu'à l'en-tête `` Styling Fast-Tap Behavior '') et ici .

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 de clic, sinon elle pourrait fonctionner deux fois comme elle l'a fait pour moi, c'est-à-dire:

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

});

Je sais que c'est vieux, mais ne pouvez-vous pas simplement tester pour voir si "tactile" est pris en charge dans le navigateur? Ensuite, créez une variable qui soit "touchend" ou "click" et utilisez cette variable 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 et si ce n'est pas le cas, nous utilisons l'événement "click".

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

Je suis tombé sur une alternative extrêmement populaire appelée Hammer.js (page Github) qui, à mon avis, est la meilleure approche.

Hammer.js est une bibliothèque tactile plus complète (avec de nombreuses commandes de balayage) que Fastclick.js (réponse la plus votée).

Attention cependant: le défilement rapide sur les appareils mobiles a tendance à vraiment verrouiller l'interface utilisateur lorsque vous utilisez Hammer.js ou Fastclick.js. C'est un problème majeur si votre site a un fil d'actualité ou une interface où les utilisateurs défileront beaucoup (cela ressemblerait à la plupart des applications Web). Pour cette raison, je n'utilise aucun de ces plugins pour le moment.

D'une manière ou d'une autre, la désactivation du zoom semble désactiver ce petit délai. Cela a du sens, car un double-tap n'est plus nécessaire alors.

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

Mais soyez conscient de l'impact que cela aura sur la convivialité. Il peut être utile pour les pages Web conçues comme des applications, mais ne devrait pas être utilisé pour des pages «statiques» plus générales à mon humble avis. Je l'utilise pour un projet animalier qui nécessite une faible latence.

Malheureusement, il n'y a pas de moyen facile de le faire. Donc, simplement utiliser touchstartou touchendvous laissera avec d'autres problèmes comme quelqu'un commence à faire défiler lorsque vous cliquez sur un bouton par exemple. Nous utilisons zepto depuis un certain temps, et même avec ce très bon cadre, certains problèmes se sont posés au fil du temps. Beaucoup d'entre eux sont fermés , mais cela ne semble pas être un domaine de solution simple.

Nous avons cette solution pour gérer globalement les clics sur les liens:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

J'ai cherché un moyen simple sans jquery et sans bibliothèque fastclick. Cela fonctionne pour moi:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Juste pour fournir quelques informations supplémentaires.

Sur iOS 10, les <button>s sur ma page ne pouvaient pas être déclenchés en continu. Il y avait toujours un décalage.

J'ai essayé fastclick / Hammer / tapjs / remplacer click par touchstart, tout a échoué.

MISE À JOUR: la raison semble être que le bouton est trop près du bord! déplacez-le près du centre et le décalage est parti!

Vous êtes censé déclarer explicitement le mode passif :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

Dans jQuery, vous pouvez lier l'événement "touchend", le code de déclenchement de sorcière immédiatement après le tap (c'est comme un keydown dans le clavier). Testé sur les versions actuelles des tablettes Chrome et Firefox. N'oubliez pas «cliquez» également, pour vos ordinateurs portables et appareils de bureau à écran tactile.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});