移动端click延迟解决方案

移动端click延迟解决方案

一.禁止屏幕缩放

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

二.封装一个函数

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;
    });    
}
//调用
tap(div,function(){    /*执行代码*/     });

三.使用fastclick插件

地址：https://github.com/ftlabs/fastclick

(1)引入插件

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

(2)body中复制如下代码

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

(3)使用示例

var div = document.querySelector('div');
div.addEventListener('click', function (e) {
    /*执行代码*/
 })