移动端click事件延迟300ms到底是怎么回事，该如何解决？

最新推荐文章于 2024-08-17 15:12:25 发布

wflynn

最新推荐文章于 2024-08-17 15:12:25 发布

阅读量652

点赞数 1

分类专栏：面试知识点

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/101352337

版权

面试知识点专栏收录该内容

169 篇文章 7 订阅

订阅专栏

问题由来

双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

那么这和 300 毫秒延迟有什么联系呢？

假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

解决方法

FastClick：专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉

下载地址：https://github.com/ftlabs/fastclick

FastClick 的使用方法非常简单，在 window load 事件之后，在body上调用FastClick.attach()即可。

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

attach方法虽可在更具体的元素上调用，直接绑定到body上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用meta设置了user-scalable=no或者 touch-action 属性的解决方案时，会静默退出。

移动端类库 jQuery和zepto.js都支持tap事件来解决这个问题，尽管它们的响应速度比FastClick慢一些。

粗暴型：禁用缩放

指针事件 (Pointer Events)

指针事件最初由微软提出，现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。这个草案规范旨在使用一个单独的事件模型，对所有输入类型，包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等，进行统一的处理。

比如用css设置-ms-touch-action: none，那么对应的元素在被点击之后，浏览器不会启动缩放操作，也就避免了这个300ms延迟，但目前只有IE10+支持，目前touch开发的重点在safari和chrome，因此你懂的，此方案目前兼容性不好，不过chrome表示会在未来版本中支持的。

指针事件 (使非IE也支持)

上面也说道touch-action: none是一个办法，那么其它浏览器不支持怎么办呢？下面的几个类库是关于这方面的，感兴趣的可以去研究下：

1.Google的Polymer
2.微软的 HandJS
3.@Rich-Harris 的 Points

touch-action: none这种方案虽然可以解决这个问题，但影响的面比较广，不是单纯的来解决300ms延时问题的，有可能会带来性能和其它操作上的隐患，慎用。