click延时解决方案

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

解决方案:

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

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

2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是:

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

        2.当我们手指离开屏幕,用离开的时间减去触摸的时间

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

        封装tap,解决click 300ms延时

//tap.js

function tap (obj, callback) {
var isMove = false;
var startTime = 0; //记录触摸时候的时间变量
obj . addEventLi stener (' touchstart', function (e) {
startTime = Date.now(); //记录触摸时间
}) ;
obj . addEventListener (' touchmove', function (e) {
isMove = true;	//看看是否有滑动，有滑动算拖拽，不算点击
}) ;
obj . addEventLi stener (' touchend'，function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击
callback && callback(); //执行回调函数
}
isMove = false; //取反重置
startrime = 0;
}) ;
    }
    //调用
    tap (div, function() {
    //执行代码 });

3.使用插件。fastclick 插件解决300ms延迟。

        JS 插件是js文件,功能单一，并且小

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