泽泽の博客 泽泽の博客

用 FastClick 消除移动端点击延迟

in 代码相关 文章转载请注明来源!

首先为什么存在延迟?

根据 Google 开发者文档:

...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

译:
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。

FastClick 是什么?

由 FTLabs 开发,Github 项目地址:https://github.com/ftlabs/fastclick
专门用来处理移动端点击事件的 300 毫秒延迟,

如何使用 FastClick

首先引用 js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

然后在body内加入:

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

或者, 如果您正在使用 jQuery:

$(function() {
    FastClick.attach(document.body);
});

详细食用方法请看原作者的 github 吧 https://github.com/ftlabs/fastclick

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《 署名 - 非商业性使用 - 相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/FastClick.html (转载时请注明本文出处及文章链接)

点击延迟 FastClick
发表新评论
已有 6 条评论
  1. 香菇
    香菇Windows 10谷歌浏览器
    回复

    网页双击,噫,大概可以用来锻炼手部肌肉?

  2. CAISIDUO
    CAISIDUOWindows 10谷歌浏览器
    回复

    难怪在手机上总是感觉点击怪怪的#[滑之稽]

    1. CAISIDUO
      CAISIDUOWindows 10谷歌浏览器
      回复

      @CAISIDUO 嗯嗯 少一份js多一份速度#[滑之稽]

    2. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @CAISIDUO 感觉弊大于利

    3. CAISIDUO
      CAISIDUOWindows 10谷歌浏览器
      回复

      @CAISIDUO 比如一个弹窗,单击选择内容 双击关闭弹窗?

    4. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @CAISIDUO 我很奇怪网页双击有什么用途啊

PREVIOUS NEXT
雷姆
拉姆