click延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

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

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

② 利用touch事件封装这个事件解决300ms延迟。

原理：

1.当我们手指触摸屏幕，记录当前触摸时间

⒉当我们手指离开屏幕，用离开的时间减去触摸的时间

3.如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

// 封装tap,解决click 300ms  延时
function tap (obj, callback) {
    var isMove = false;
    var startTime = 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(){
    // 执行代码
})

示例：点击返回顶部

function tap (obj, callback) {
    var isMove = false;
    var startTime = 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) {  
            callback && callback();  
        }
        isMove = false;
        startTime = 0;
    });
}
// 调用  点击goBack模块返回顶部
tap(goBack, function(){
    window.scroll(0,0);
})

缺点：一次只能给一个元素解决问题，元素多需要挨个调用

③ fastclick插件

GitHub官网地址: https://github.com/ftlabs/fastclick

1. 引入fastclick.js文件

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

2. 实例化fastclick

if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
              FastClick.attach(document.body);
            },false);
        }