300ms delay removal: utilisation de fastclick.js vs l'aide de ontouchstart

évènements touchstart se produit au moment où votre doigt touche l'élément tandis que cliquez sur ne pas le feu jusqu'à ce que vous relâchez votre doigt (touchend) sur le même élément. Si vous touchez, déplacez votre doigt de l'élément, puis relâchez-le, n' cliquez sur l'événement se produit. Toutefois, dans ce cas, touchstart se produit.

Parce que vous balise Cordova, je suppose que C'est une application Hybride Cordova pour mobile.

1. Sur Android depuis 2.3.x, 300ms est supprimé si vous désactivez zoom:

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

2. Sur Android depuis 4.4.3 (dont le webview est Chrome 33), 300ms est supprimé si vous spécifiez que la page est optimisée pour mobile:

<meta name="viewport" content="width=device-width" />

3. sur IE10+, utilisez CSS pour supprimer ce délai:

   - ms-touch-action: manipulation; / * IE10 /
   
   toucher-action: manipulation;/ IE11+ */

4. Sur iOS, vous ne pouvez pas utiliser fenêtre pour désactiver 300ms retard

par conséquent, pour m'assurer que les 300ms sont enlevés, j'utilise habituellement une bibliothèque de robinet pour le robinet. Par exemple: tappy (appuyez sur une seule), zepto touche (tap, glisser - bon, si votre site utilise déjà zepto), marteau.js (gestes divers), selon vos besoins. Ces événements tap ne souffrent pas du problème des 300ms.

FastClick.js devrait être OK même si Je ne l'ai pas essayé encore.

Andrew donne la bonne réponse.

En général,

"évènements touchstart" sera déclenchée lorsque nous effectuons un "clic","glisser","arrêt", etc. Cependant, comme vous le savez, ce que nous voulons capturer est "click".

What FastClick.js n'est de définir une règle pour "cliquez sur". Par exemple, on pourrait définir la condition ci-dessous comme un "clic":

pendant le temps entre "touchstart" et "touchend" est de 200ms, dans "touchmove", nous ne trouvons pas la distance a été déplacé.

de même, nous avons pu définir la condition ci-dessous comme un "scroll":

pendant "touchstart" et" touchend", dans" touchmove", nous trouvons que la distance a été déplacée sur l'axe y mais qu'aucun déplacement de l'axe x ne se produit.

Pour se débarrasser de 300 ms retard, voici deux options:

Option 1:

Par défaut, il y aura environ 300 ms délai pour l'événement de clic sur webview, ce qui donne dans une réponse/performance très lente lorsque vous cliquez sur un bouton. Vous pouvez essayer d'Outrepasser le cliquez sur l'événement avec le ‘appuyez sur’ événement en jQuery Mobile pour supprimer le délai: ( Source: IBM)

$('btnId').on('tap', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});

Option 2: Intéressant

par défaut jQuery Mobile CSS lui-même a introduit un long délai - Je veux dire quelques places 300ms ou 350ms ou 225ms. Ces retards peuvent être optimisé. J'ai aussi modifié le CSS par défaut et réduit le long délai de 350ms 100mspage de transition et c'était vraiment génial.

recherche dans le jQuery Mobile CSS : animation-durée

JQuery Mobile 1.2.0

Dans certains endroits, les délais sont fixés à: -webkit-animation-duration:350ms;-moz-animation-duration:350ms alors que d'autres endroits retard est: -webkit-animation-duration:225ms;-moz-animation-duration:225ms

La dernière version sur github:

.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

Case github:

maintenant c'est à vous de choisir le délai que vous voulez optimiser, comme clic, transition de page, flip, slide, etc. et en conséquence il suffit de modifier le délai par défaut avec votre propre délai souhaité.

Dans ce sens, il y a NO besoin d'une bibliothèque supplémentaire

si vous allez sur un site qui n'est pas optimisé mobile, il commence à zoomer pour que vous puissiez voir toute la largeur de la page. Pour lire le contenu, Vous pouvez soit pincer zoom, ou double-tapoter du contenu pour le zoomer à pleine largeur. Ce double-tap est le tueur de performance, parce qu'avec chaque tap nous devons attendre pour voir si cela pourrait devenir un double-tap, et cette attente est de 300m. Voici comment cela se déroule:

• évènements touchstart
• touchend
• attendre 300m en cas d'un autre appuyez sur
• cliquez sur

cette pause s'applique aux clics dans JavaScript, mais aussi à d'autres interactions basées sur les clics comme les liens et les contrôles de formulaires.

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

Fastclick.js résoudre problème lié si l'utilisateur ne voulait pas cliquer sur l'élément et a juste décidé de faire défiler.

vous ne pouvez pas utiliser FastClick.js aujourd'hui:

Note: à partir de fin 2015 la plupart des navigateurs mobiles - notamment Chrome et Safari - n'ont plus un délai de 300ms touch, donc fastclick n'offre aucun avantage sur les nouveaux navigateurs, et les risques d'introduire des bugs dans votre application. Examiner attentivement si vous avez vraiment besoin de l'utiliser.

(tiré de: https://github.com/ftlabs/fastclick docs)