300ms/350ms点击延迟终于离去了

    js

由来

300ms延迟是安卓设备,350ms是iOS设备。 其实都是早期为了兼容PC端的网页,也能在移动端正常浏览,并使用了双击放大的功能。最早是由apple提出,然后其他各大厂商相继模仿。
这就导致了,为了监测是单击打开链接,还是双击放大网页,因此在点击后等待300ms再执行操作。这事放在早期的移动端互联网时代,大家并不觉得有什么不妥。但是随着移动端APP的发展,这种点击延迟就渐渐的让人无法忍受了,也许这就叫没有对比就没有伤害吧。

早期解决

后来,为了解决这个问题,xxx 组织写了个js框架,叫做 fastClick.js 然后很多移动端的js框架都整合了这货,例如 zepto 等。

这里顺便提一下,fastClick的原理: 拦截touchStart事件,获取到touchEnd 的行为传给click并执行,再阻止touchEnd的行为,从而实现了无延迟的点击。

然而,现在你已经不需要这货了

当前版本的iOS Safari (9.1+) 以及 chrome (32+) 都已经可以通过设置如下头部属性解决

1
<meta name="viewport" content="width=device-width">

300ms tap delay, gone away

页阅读量:  ・  站访问量:  ・  站访客数: