- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>click&tap</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h3 {
text-align: center;
line-height: 50px;
border-bottom: 1px solid #c7c7c7;
}
</style>
</head>
<body>
<h3 id="h3">click me</h3>
</body>
<script type="text/javascript" src="../../common/zepto.js"></script>
<script type="text/javascript" src="../../common/touch.js"></script>
<script type="text/javascript">
// click 事件延迟问题
document.getElementById('h3').addEventListener('click', function (e) {
console.log("=========click1======")
console.log(new Date().getTime());
});
$("#h3").on('tap', function (e) {
console.log("=========zepto tap1======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('click', function (e) {
console.log("=========click2======")
console.log(new Date().getTime());
});
$("#h3").on('tap', function (e) {
console.log("=========zepto tap2======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('touchend', function (e) {
console.log("=========touchend======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('touchstart', function (e) {
console.log("=========touchstart======")
console.log(new Date().getTime());
});
</script>
</html>//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.
阿神2017-05-19 10:15:16
Il est recommandé de citerfastclick.js,可以解决clickLes événements auront un délai de 300 millisecondes
Site officiel https://github.com/ftlabs/fas...
天蓬老师2017-05-19 10:15:16
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.
黄舟2017-05-19 10:15:16
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 ->