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
微信关注我们
转载内容版权归作者及来源网站所有！
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。
为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。
Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
扫码在手机上查看文章
扫描二维码，手机阅读更方便
有任何问题或合作意向欢迎联系我们
Email: 99873273@qq.com
QQ: 99873273