问说网 · 发表于 2014-12-12

文章13116 · 评论469

FastClick消除点击延时提高程序的运行效率

字数3662 · 浏览 13582 · 评论 0

FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器,比如Safari、Chrome、Opera等。

FastClick消除点击延时提高程序的运行效率

FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟。

延迟为什么存在?

根据谷歌说法

…在移动浏览器中,当你点击按钮的单击事件时,将会等待大约300ms的时间。这是因为,浏览器是等着看,如果你是真正执行双击。

兼容性

FastClick 能够完美的兼容一下浏览器版本:

  • Mobile Safari on iOS 3 and upwards
  • Chrome on iOS 5 and upwards
  • Chrome on Android (ICS)
  • Opera Mobile 11.5 and upwards
  • Android Browser since Android 2
  • PlayBook OS 1 and upwards

什么时候不使用他

fastclick不附加任何监听器在桌面浏览器上面,所以如果你的项目不是针对的移动浏览器,那么就不要使用这个插件。

Android 设备上的 google浏览器 (Chrome) 32+ 版本,在meta头信息中设置 width=device-width 没有300毫秒的延时,所以也无需使用本插件。

<meta name="viewport" content="width=device-width, initial-scale=1">

Chrome浏览器在安卓设备上的时候,设置meta头信息中 user-scalable=no 但是这样就无法让用户多点触控缩放网页了。

对于IE11 + 你可以设置 touch-action: manipulation; 来禁用通过双击放大某些元素例如:链接和按钮的,对于IE10使用 -ms-touch-action: manipulation

使用方法

1、引入插件的javascript文件到你的HTML网页中,像这样:

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

注意:type属性在HTML5网页中可以省略不写。

脚本必须加载到实例化fastclick在页面的任何元素之前。

实例化 fastclick 最好在body元素的前面,这是使用推荐的方法:

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

或者你使用了jquery插件,你可以这样编写:

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

如果你使用的browserify CommonJS的模块系统或另一种风格,其fastclick.attach函数将返回 require('fastclick') 。作为一个结果,使用fastclick这些装载机的最简单的方法如下:

var attachFastClick = require('fastclick');
attachFastClick(document.body);

压缩版本的fastclick

运行 make 建立一个缩小版的fastclick关闭其他API使用编译器。缩小的文件保存到 build/fastclick.min.js 或者你可以下载一个预先缩小版

Note: the pre-minified version is built using our build service which exposes the FastClick object through Origami.fastclick and will have the Browserify/CommonJS API (see above).

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

项目地址:https://github.com/ftlabs/fastclick

下载插件:https://github.com/ftlabs/fastclick/archive/master.zip

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

问说网手机版

躺着 站着 跪着轻松访问

更多 热门话题

APP界面

APP界面

文章 41517

APP欣赏

APP欣赏

文章 41450

APP手机界面

APP手机界面

文章 41440

图片素材

图片素材

文章 29463

高清图片

高清图片

文章 26225

更多 推荐作者

问说网

文章 13116

GallupDarnell

文章 117

GibbonRoy

文章 119

StuartKelly

文章 114

YeatesGeoffrey

文章 113

发布评论

顶部 反馈 评论 底部

意见反馈

感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

您的反馈我们已收到!

感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!