La méthode d'écriture la plus recommandée sur le terminal mobile est d'utiliser l'événement tap de zepto au lieu du clic. La raison est généralement que l'événement click a le légendaire délai de 300 ms.
Mais le test réel a révélé que l'événement click est plus rapide que l'événement tap.
Le délai de déclenchement du clic et du tapotement n'est que d'environ 100 ms
click&tap
click me
//output click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494338413993 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494338414081 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494338414082 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494338414083 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494338414084 click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2====== click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494338414084Lorsque le terminal mobile utilise l'événement tap de zepto, celui-ci sera un peu transparent.
La raison est généralement la suivante : le DOM parent (généralement le calque de masque) est fermé ou masqué dans l'événement tap, et le DOM enfant a également un événement de clic, ce qui provoque l'échec du DOM enfant en raison du mécanisme de flux d'événements ( capturer des bulles) L'événement click est également déclenché.
Analyse : s'ils sont tous en phase de bouillonnement (l'étape de bouillonnement par défaut lorsque les événements sont déclenchés), le parent sera définitivement déclenché après le sous-ensemble, et il ne devrait y avoir aucun phénomène de pointage.
Certains articles de blog indiquent que le parent utilise le tapotement et que le sous-ensemble utilise le clic. En regardant le temps de déclenchement dans la démo, il est peu probable que cela se produise.
La raison principale est qu'il y aura un idiot qui utilisera le clic et le tapotement en même temps dans la même logique métier ?
Donc, en gros, on a l'impression que la phase de capture sert principalement à déclencher des événements en même temps. Mais il y a aussi un problème. Le mécanisme d'événements de Zepto est basé sur le bouillonnement d'événements, et les événements dans touch.js sont liés à des documents.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisez tap ou introduisez fastclick.js
Il est recommandé de citer
fastclick.js,可以解决clickLes événements auront un délai de 300 millisecondesSite officiel https://github.com/ftlabs/fas...
L'événement tap de
zepto n'est qu'une simulation, et son efficacité est moyenne. Naturellement, il n'est pas aussi rapide que la réponse de clic native. S'il s'agit d'une exigence relativement simple (par exemple, vous n'avez besoin que de répondre aux événements « clic »), vous pouvez envisager d'utiliser fastclick. L'avantage est que le traitement original des événements de clic n'a pas besoin d'être modifié et qu'il peut être adapté. aux PC et aux terminaux mobiles. Mais s’il ne s’agit que d’une exigence mobile, utilisez simplement l’événement touchstart natif.
Une autre solution consiste à utiliser directement une bibliothèque de gestes, telle que Hammerjs ou AlloyFinger de Tencent, qui convient aux scénarios avec des exigences gestuelles plus complexes.
Pourquoi ne pas envisager Touchstart
Corrigez la raison de votre événement de clic. Ce n'est pas à cause du mécanisme de bouillonnement, mais à cause du retard de l'événement de clic.
Par exemple, lorsque vous cliquez sur le bouton de fermeture, touchend déclenche d'abord le clic, et le calque contextuel et le masque sont masqués. Après le toucher, continuez à attendre 300 ms et constatez qu'il n'y a pas d'autre comportement, puis continuez à déclencher le clic. Puisque le calque contextuel a disparu à ce moment, la cible de l'événement de clic actuel est sur l'élément sous-jacent, donc le. le contenu de l'événement sous-jacent est déclenché. L'ensemble du processus de déclenchement de l'événement est touchend -> appuyez sur ->