开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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


为什么会存在延迟呢?

从你触摸按钮到触发点击事件,移动端浏览器会等待接近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 延时,所以,也不需要

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


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


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



使用方法

在 HTML 页面中引入 fastclick.js

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


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


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

1
2
3
4
5
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded'function() {
        FastClick.attach(document.body);
    }, false);
}


如果你使用的是 jQuery

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


如果你使用的是 Browserify 或其他 CommonJS 风格的模块系统,FastClick.attach 方法会在你调用 require('fastclick') 之后返回。所以,使用 FastClick 最简单的方法如下:

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


示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        a{
            text-decoration: none;
            color:black;
        }
    </style>
</head>
<body>
<a href="#">链接</a>
 
<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
    $('a').click(function(e){
        e.preventDefault();
        $(this).css('color','red');
    });
 
 
</script>
</body>
</html>


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


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

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1886507


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 导读
十多年前,Internet在国内开始流行。其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注。由于当时网速的限制,网页主要承载文本、图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页。
1266 0
error loading /system/media/audio/ui/Effect_Tick.ogg
问题原因:      同一个AVD,调试了很多个项目,产生了N多个log文件,这些文件可能产生了影响。 解决办法:     新建一个AVD即可。
748 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载