JavaScript 移动端点击事件延迟问题

移动端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延时
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 () {//执行代码});

定义为点击

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值