fastclick.js---解决移动端点击事件300ms延时

Fast Click 是一个简单、易用的库,专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时。

成都创新互联公司长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为沙雅企业提供专业的成都网站制作、成都网站设计,沙雅网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

为什么会存在延迟呢?

从你触摸按钮到触发点击事件,移动端浏览器会等待接近300ms,原因是浏览器会等待以确定你是否执行双击事件

兼容性

  • 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

何时不需要使用

1、FastClick 不会伴随监听任何桌面浏览器

2、Android 系统中,在头部 meta 中设置 width=device-width 的Chrome32+ 浏览器不存在300ms 延时,所以,也不需要

3、同样的情况也适用于 Android设备(任何版本),在viewport 中设置 user-scalable=no,但这样就禁止缩放网页了

4、IE11+ 浏览器中,你可以使用 touch-action: manipulation;  禁止通过双击来放大一些元素(比如:链接和按钮)。IE10可以使用 -ms-touch-action: manipulation

使用方法

在 HTML 页面中引入 fastclick.js

script 文件必须在页面元素 实例化 FastClick 之前加载

在 body 上实例化 FastClick ,推荐按照如下方法使用:

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);

示例:




    
    
    
    
    
    
    
    


链接





通过手机来运行这段代码,使用FastCick事件,可以很明显看到,点击链接文字变红时没有了闪烁效果


Github地址:https://github.com/ftlabs/fastclick


当前文章:fastclick.js---解决移动端点击事件300ms延时
网站网址:http://csdahua.cn/article/johegh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流