温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-03 19:10:02 来源:网络 阅读:5780 作者:frwupeng517 栏目:移动开发

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 延时,所以,也不需要

<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



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI