Ryongyon!

这世界上假绅士太多,缺少训练有素的流氓

· 实践教程 · · 1520次浏览

用 FastClick 消除移动端点击延迟

为什么存在延迟?

根据 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?

第一步:

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

第二步:

<script type="text/javascript">
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
</script>

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

<script type="text/javascript">
$(function() {
        FastClick.attach(document.body);
    });
</script>
评论 (10条)
  1. 我去,这个问题一直困扰着我,安卓端一般没问题,iOS 下经常点击延迟……?

    回复
    1. @阿歪

      翻遍了你的博客,没有找到...但是找到了增加打赏功能的方法:)

      回复
      1. 拾叁 博主
        @Mr.He

        有的哟 , 请擅用博客的搜索功能,直接搜索“打赏”就可以搜索到了 ?

        回复
      2. @Mr.He

        这个问题时不时会出现,有时候写个 demo 的 html 也会有,有时候死活就是折腾不出 ?
        另,我的主题没打赏的功能,也没这个必要

        回复
      3. 拾叁 博主
        @Mr.He

        哈哈哈 看错了 不好意思 我以为你问的是打赏功能的代码?

        回复
        1. @拾叁

          我想要这个UA显示效果,真和谐,插件提供的不是这样.

          回复
          1. 拾叁 博主
            @Mr.He

            自己弄点CSS即可,可以研究研究插件 自己写一个并不难

  2. 很新奇,这样的事情第一次听说。奇怪的是,JS有区分click和double click 啊,为什么click时也要等呢?

    回复
  3. 你的操作系统和浏览器显示的效果很棒,用的是哪款插件啊

    回复
    1. 拾叁 博主
      @Mr.He

      我记得我有发过文章的,您找一下

      回复