移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题?
- 原理 :移动端屏幕双击会缩放页面 300ms延迟
- 会出现点透现象
在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,因为有300ms延迟,所以这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象 - 解决方案
-
视口标签中禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
-
利用touch事件封装事件解除300ms延迟
-
使用插件 fastclick插件解决300ms延迟
官网:https://github.com/ftlabs/fastclick lib文件----fastclick
-