首页 > 技术文章 > 移动端的click事件延迟触发的原理是什么?如何解决这个问题?

zcsmile 2019-06-02 09:50 原文

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

推荐阅读