移动端click点击事件300ms延迟问题

一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。比如iPhone默认双击缩放就会让click点击事件300ms延迟问题。

目录

一、解决办法:禁用缩放

二、解决办法:更改默认的视口宽度

三、解决办法:CSS touch-action

四、解决方法:FastClick


一、解决办法:禁用缩放

当HTML文档头部包含如下meta标签时:

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

表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

二、解决办法:更改默认的视口宽度

一开始,为了让桌面站点能在移动端浏览器正常显示,移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度,而是要比设备浏览器视窗宽度大,通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。

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

因为双击缩放主要是用来改善桌面站点在移动端浏览体验的,而随着响应式设计的普及,很多站点都已经对移动端做过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签,那浏览器就可以认为该网站已经对移动端做过了适配和优化,就无需双击缩放操作了。
这个方案相比方案一的好处在于,它没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。

三、解决办法:CSS touch-action

跟300ms点击延迟相关的,是touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理(也就是浏览器)的默认行为。如果将该属性值设置为touch-action: none,那么表示在该元素上的操作不会触发用户代理的任何默认行为,就无需进行300ms的延迟判断。

四、解决方法:FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

基本原理:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉.

fastClick支持npm下载依赖,比如在vue中:

第一步呢
npm install fastclick -S

然后呢,在main.js中引入,并绑定到body。


import FastClick from 'fastclick'

FastClick.attach(document.body);

这样子呢就可以让vue+fastclik完美的结合解决300ms的延迟啦~是不是很棒棒呢

转载自以下作者,感谢作者的奉献~自己加了私自加了点东西,希望博主不要介意哦~
作者:tsyeyuanfeng
链接:https://www.jianshu.com/p/6e2b68a93c88

猜你喜欢

转载自blog.csdn.net/qq_39524670/article/details/81740865