web移动端click三种延时解决方案（包含fastclick插件使用方法）

目录

click延时发生原因及影响：

一、禁用缩放

二、利用touch事件封装

三、fastclick插件调用

使用步骤：

---

click延时发生原因及影响：

        移动端click因为屏幕双击会缩放页面，所以会有300ms的延时来判断是否有第二次点击事件。但对于开发中的一些点击事件，我们不想点击效果存在延时（想让效果立马生效），所以接下来介绍三种解决延时的方法。

---

一、禁用缩放

思路：浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

<meta name="viewport" content="user-scalable=no">

缺点：某些特定页面是需要让用户有缩放功能的，这种做法相当于一刀切，只能在不需要缩放功能的时候用

二、利用touch事件封装

思路：（1）手指触摸屏幕时，记录当前触摸事件

           （2）当手指离开屏幕时，用离开的时间减去触摸的事件

           （3）如果时间小于150ms，并且没有滑动过屏幕，就定义为点击

function tap (obj, callback) {
    var isMove = false;
    var starTime = 0;    //记录触摸时的比变量
    obj.addEventListener('touchstart', function (e) {
        startTime = Date.now();    //记录触摸时间
    });
    obj.addEventListener('touchmove', function (e) {
        isMove = true;    //判断是否有滑动
    });
    obj.addEventListener('touchend', function (e) {
        if(!isMove && (Date.now() - startTime) < 150) {//手指触摸且离开时间小于150ms就算为点击
            callback && callback();    //执行回调函数
        }
        isMove = false;    //取反重置
        startTime = 0;
    });
}
tap(div, function() { //具体执行代码 })    //调用

缺点：如果有一百个需要消除延时的对象，就要调用一百次函数，过于繁琐

三、fastclick插件调用

思路：通过调用封装好的插件，让整个布局中的所有延时取消，避免了重复调用

(因为代码过长就不演示了)

下载地址:  ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs (github.com)

使用步骤：

1.进入lib文件夹

2.进入fastclick.js

 

3.选中所有内容复制

 

4.在项目中创建js文件夹，并把所有代码放入其中 

 5.在html页面中引入 

<script src='./js/fastclick.js'></script>

 

 6.一定要按照作者给出的方法调用（重点）

---

生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！