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

问说网 · 发布于 2014-12-12 · 字数3662 · 浏览 14052 · 评论 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

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

相关文章

  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2016-12-26恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 2017-04-05解决mysql无法远程访问的问题
  • 2017-04-19ASP.NET MVC 4 中的JSON数据交互的方法
  • 发布评论

    为您推荐

    紫色背景扁平化iPhone5手机样机素材
    问说网 · 发布于 2016-09-24

    紫色背景扁平化iPhone5手机样机素材

    紫色背景扁平化iPhone5手机样机素材,扁平化样机素材免费下载分享,iPhone5手机样机PSD素材设计,扁平化手机素材投影,倾斜的手机样机素材。

    Blogify简约扁平化博客主题PSD模板

    Blogify简约扁平化博客主题PSD模板,Blogify是博客风格的完美小主题。利用Blogify是干净的,审美和简单的功能,确保你的博客有别于简约精致的休息…

    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    问说网 · 发布于 2016-10-03 · 浏览 1083 · 评论 0
    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
    问说网 · 发布于 2016-12-26

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送

    恒创这次跨年促销,活动力度大,活动产品多。国内/香港/韩国/美国所有节点,新购/续费多重福利,满390元送小米VR眼镜。还可以免费抽奖,蓝牙耳机,小米充电宝等。

    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网 · 发布于 2017-04-05

    解决mysql无法远程访问的问题

    问题描述 1.windows 2003 server 32bit+IIS+护卫神+安全狗+navicat 2.root@%已配置 3.干掉护卫神,安全狗,防火墙…

    问说网 · 发布于 2017-04-19

    ASP.NET MVC 4 中的JSON数据交互的方法

    前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 1 return Content("{\"id\":\"1\",\"nam…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13128 文章
    493 评论
    1915 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1799

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1734

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1742

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1240

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1438

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 呼吸快窒息

    文章 104 · 评论 0

    关注 失戀德標簽

    文章 92 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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