移动端大家比较推荐的写法都是采用zepto的tap事件代替click,理由一般是click事件有传说中的300ms延迟。
但实际测试发现click事件还比tap事件相应快一些。
click 和 tap 触发延迟只有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 1494338414084移动端采用zepto的tap事件时会有点透的现象。
原因一般是：在tap事件中关闭或者隐藏了父级（一般情况下是遮罩层）的dom,而子dom恰好也存在点击事件，这样由于事件流机制（捕获冒泡）导致子级dom也触发了点击事件。
分析：都在冒泡阶段（事件触发默认冒泡阶段）的话，父级肯定比子集后触发，应该不会产生点透现象。
有些博客文章说父级使用tap,子集使用click。看demo中的触发时间也不太发生这种情况。
主要是会有那个傻逼在一个业务逻辑中同时使用click和tap呢？
所以基本上感觉主要是同时使用捕获阶段触发事件。但是这样也有一个问题，zepto的事件机制是基于事件冒泡，touch.js中事件都是绑定在document上的。
天蓬老师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。