click事件传说中的300ms延迟

click&tap

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

测试结果

移动端启用

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

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

不启用

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

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

demo

//zepto 是1.2的

//touch.js 是github上拉取的最新的

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上的。