移动端click事件出现300ms延迟

问题分析：

双击缩放是指手在屏幕上快速点击两次，iOS自带的Safari浏览器会将网页缩放至原始比例。
当用户在屏幕上单击某元素时，浏览器会先捕获此处单击，但浏览器不知道用户是要单击链接还是要双击该部分区域进行缩放操作，所以浏览器捕获第1次单击后，会先持续一段时间t，如果在t时间段内用户未进行下一次点击，则浏览器会做单击跳转链接的处理；如果t时间段内用户进行了第2次单击操作，则浏览器会禁止跳转，转而对点击区域进行缩放操作。那么这个时间区间t是多少呢？在IOS safari下，大概为300ms。

解决方案：

一、浏览器开发商的解决方案
1、禁用缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

缺点：这样做，会完全禁用缩放，如果想放大很小的图片或文字，就办不到了。
2、更改默认的视口宽度

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

该方案没有完全禁用缩放，只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。
3、CSS touch-action
touch-action: none，表示在该元素上的操作不会触发浏览器的任何默认行为，就无需进行300ms的延迟判断。

要解决300ms点击延迟的问题，从长远来说，自然还是得浏览器开发商提供统一的最终的解决方案。但是，到目前为止，以上3种方案并不能提供很好的兼容性，对于方案1和方案2，Chrome是率先支持的，Firefox紧随其后，然而令Safari头疼的是，它除了双击缩放还有双击滚动操作，如果采用这种两种方案，势必连双击滚动也要一起禁用；对于方案3，IE是支持的，但是其他浏览器支持不完善。
所以，在浏览器开发商最终统一的解决方案出来之前，我们还有一些基于Javascript的现成的解决方案可以用。
二、Javascript的解决方案
1、指针事件的polyfill
由于除了IE之外的大部分浏览器都不支持新的CSS属性touch-action，所以指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表，另一种方案是将touch-action作为html标签的属性。
2、FastClick
FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即触发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

巴特西

移动端click事件出现300ms延迟

最新文章

热门文章