click事件传说中的300ms延迟

click&tap

移动端你们比较推荐的写法都是采用zepto的tap事件代替click,理由通常是click事件有传说中的300ms延迟。

测试结果

移动端启用 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

测试发现click事件还比tap事件相应快一些。

click 和 tap 触发延迟只有100ms左右

不启用 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

测试发现click事件还比tap事慢200ms 左右。

tap 和 touchend 触发延迟相对touchstart有100ms左右。[这个启不启用缩放都同样]。

demo

//zepto 是1.2的
<script type="text/javascript" src="../../common/zepto.js"></script>
//touch.js 是github上拉取的最新的
<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>

output

//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

//output [不启用移动端禁用缩放功能]
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494341055611
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494341055710
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494341055712
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494341055713
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494341055911
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494341055911

相关问题

移动端采用zepto的tap事件时会有点透的现象。

缘由通常是：在tap事件中关闭或者隐藏了父级（通常状况下是遮罩层）的dom,而子dom刚好也存在点击事件，这样因为事件流机制（捕获冒泡）致使子级dom也触发了点击事件。

分析：都在冒泡阶段（事件触发默认冒泡阶段）的话，父级确定比子集后触发，应该不会产生点透现象。

有些博客文章说父级使用tap,子集使用click。看demo中的触发时间也只有在不启用缩放时会发生这种状况。

主要是会有那个傻逼在一个业务逻辑中同时使用click和tap呢？

因此基本上感受主要是同时使用捕获阶段触发事件。可是这样也有一个问题，zepto的事件机制是基于事件冒泡，touch.js中事件都是绑定在document上的。