移动端的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

猜你喜欢

转载自www.cnblogs.com/zcsmile/p/10962018.html