The most recommended writing method on the mobile terminal is to use zepto's tap event instead of click. The reason is generally that the click event has the legendary 300ms delay.
But the actual test found that the click event is faster than the tap event.
The trigger delay of click and tap is only about 100ms
<!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 1494338414084When the mobile terminal uses zepto's tap event, it will be a bit transparent.
The reason is generally: the dom of the parent (usually the mask layer) is closed or hidden in the tap event, and the child dom happens to have a click event, so the child dom happens to have a click event due to the event flow mechanism (capture bubbling). The click event is also triggered by the level DOM.
Analysis: If they are all in the bubbling stage (the default bubbling stage for event triggering), the parent will definitely be triggered after the subset, and there should be no point-through phenomenon.
Some blog articles say that the parent uses tap and the subset uses click. Looking at the trigger time in the demo, this is unlikely to happen.
Mainly because there will be that idiot who uses click and tap at the same time in the same business logic?
So basically it feels like the capture phase is mainly used to trigger events at the same time. But there is also a problem. Zepto's event mechanism is based on event bubbling, and events in touch.js are bound to documents.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
都用tap 或者引入fastclick.js
建议引用
fastclick.js,可以解决click事件会有300毫秒的延迟官网 https://github.com/ftlabs/fas...
zepto的tap事件也只是模拟，而且效率也一般，自然没有原生的click响应快。如果是比较简单的需求（比如只需要响应“点击”事件），可以考虑用fastclick，好处是原有的click事件处理不用改，且可以同时适配pc端和移动端。但如果只是移动端需求，那直接用原生的touchstart事件就可以了。
另外还有一种解决思路是直接上手势库，比如Hammerjs或者腾讯的AlloyFinger之类的，适合有比较复杂的手势需求的场景。
为啥不考虑下touchstart
纠正一下你的点透事件的原因哦，不是因为冒泡机制，而是因为点击事件的延迟。
比如，点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了，则继续触发click，由于这时弹出层已经消失，所以当前click事件的target就在底层元素上，于是就触发了底层事件内容。整个事件触发过程为 touchend -> tap -> click。