- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Die am meisten empfohlene Schreibmethode auf dem mobilen Endgerät ist die Verwendung des Tipp-Ereignisses anstelle des Klick-Ereignisses. Der Grund dafür ist im Allgemeinen, dass das Klick-Ereignis die legendäre Verzögerung von 300 ms aufweist.
Der eigentliche Test ergab jedoch, dass das Klickereignis schneller ist als das Tippereignis.
Die Auslöseverzögerung von Klicken und Tippen beträgt nur etwa 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 1494338414084Wenn das mobile Endgerät das Tap-Ereignis von Zepto verwendet, ist es etwas transparent.
Der Grund ist im Allgemeinen: Das übergeordnete DOM (normalerweise die Maskenebene) ist im Tap-Ereignis geschlossen oder ausgeblendet, und das untergeordnete DOM verfügt zufällig auch über ein Klickereignis, das dazu führt, dass das untergeordnete DOM aufgrund des Ereignisflussmechanismus fehlschlägt ( Capture-Blubbern) Das Click-Ereignis wird ebenfalls ausgelöst.
Analyse: Wenn sie sich alle in der Blasenphase befinden (die standardmäßige Blasenphase, wenn Ereignisse ausgelöst werden), wird die übergeordnete Gruppe definitiv nach der Teilmenge ausgelöst und es sollte kein Point-Through-Phänomen auftreten.
Einige Blog-Artikel sagen, dass die übergeordnete Gruppe das Tippen und die Teilmenge das Klicken verwendet. Betrachtet man den Auslösezeitpunkt in der Demo, ist es unwahrscheinlich, dass dies geschieht.
Der Hauptgrund ist, dass es einen Idioten gibt, der gleichzeitig Klicken und Tippen in derselben Geschäftslogik verwendet?
Im Grunde fühlt es sich also so an, als ob die Capture-Phase hauptsächlich dazu genutzt wird, gleichzeitig Ereignisse auszulösen. Es gibt jedoch auch ein Problem. Der Ereignismechanismus von Zepto basiert auf dem Ereignis-Bubbling, und Ereignisse in touch.js sind an Dokumente gebunden.
阿神2017-05-19 10:15:16
建议引用fastclick.js,可以解决click事件会有300毫秒的延迟
官网 https://github.com/ftlabs/fas...
天蓬老师2017-05-19 10:15:16
zepto的tap事件也只是模拟，而且效率也一般，自然没有原生的click响应快。如果是比较简单的需求（比如只需要响应“点击”事件），可以考虑用fastclick，好处是原有的click事件处理不用改，且可以同时适配pc端和移动端。但如果只是移动端需求，那直接用原生的touchstart事件就可以了。
另外还有一种解决思路是直接上手势库，比如Hammerjs或者腾讯的AlloyFinger之类的，适合有比较复杂的手势需求的场景。
黄舟2017-05-19 10:15:16
纠正一下你的点透事件的原因哦，不是因为冒泡机制，而是因为点击事件的延迟。
比如，点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了，则继续触发click，由于这时弹出层已经消失，所以当前click事件的target就在底层元素上，于是就触发了底层事件内容。整个事件触发过程为 touchend -> tap -> click。