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

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

创新互联是一家专业提供钟山企业网站建设,专注与成都做网站、成都网站建设、成都外贸网站建设、H5响应式网站、小程序制作等业务。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 延时，所以，也不需要

<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

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

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

示例：

<!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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：fastclick.js---解决移动端点击事件300ms延时-创新互联
本文路径：https://www.cdcxhl.com/article0/ccejoo.html

成都网站建设公司_创新互联，为您提供关键词优化、搜索引擎优化、品牌网站设计、面包屑导航、标签优化、网站设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容