移动端页面开发，到底用Click多还是Touch事件多？

Question

移动端页面开发，到底用Click多还是Touch事件多？
300ms真的有影响吗？有必要用touch事件吗？

Answer 1

首先，直接用touch事件是不靠谱的，因为比如滑动之类的也会触发touchStart，touchEnd，即便是zepto的tap也是用touch模拟的
其次，300ms真的有影响，感知上确实要慢一些，建议用fastclick或者zepto那种模拟的tap

Answer 2

不建议直接使用touch事件，会造成很多意想不到的问题。
其实现在的移动端开发已经不太需要关注 300ms 的问题了，因为主流的移动浏览器都已经对使用<meta name="viewport" content="width=device-width">的页面去除了 300ms 的延迟。

• Chrome 32+ in Android

• Mobile Safari in iOS 10+（包括 WKWebview）

对于旧的系统和浏览器，如果非要做兼容，可以使用 fastclick。

另外还有微信的问题。
Android 微信使用腾讯自己的 X5 内核，在去年升级为 Blink 之后点击的延迟理论上已经去除。
iOS 微信原本使用 UIWebview，始终存在 300ms 延迟，而 3 月之后会升级为 WKWebview，到那时微信内置浏览器的行为会和 Mobile Safari 保持高度一致，也不需要再考虑这个问题了。

综上，建议直接使用 click 事件。

参考

• 300ms tap delay, gone away

• More Responsive Tapping on iOS

• 微信iOS客户端将升级为WKWebview内核，请网页开发者尽快适配

Answer 3

看习惯了。如果用惯了click，挂上FastClick之后直接用click就行了；如果不用考虑兼容PC端也不想再挂个库，再加上没复杂需求的话，直接touchstart/touchend就好；复杂需求上Hummer.js或者其它手势库。

Answer 4

不是有tap吗？

Answer 5

一般移动端开发一般都会禁止用户缩放页面，加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

如图第一个为加了禁止用户缩放的meta，可以看到click根本不存在延迟执行(本质原因是浏览器不用判断用户的双击行为)，第二个允许缩放页面，click就存在延迟了。

结论：一般开发需求都是不允许用户缩放的话，那click就根本不存在延迟。(至少目前我开发都是禁止用户缩放的)

Answer 6

zepto tap有点透问题