欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端click延迟和tap事件

程序员文章站 2022-03-16 23:05:01
一、click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象。 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,以确保用户可以方便地放大网页内容,但是当用户单击按钮的时候,移动设备需要延迟约300ms执行,以判 ......

一、click等事件在移动端的延迟

click事件在移动端和pc端均可以触发,但是在移动端有延迟现象。

1、背景

由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,以确保用户可以方便地放大网页内容,但是当用户单击按钮的时候,移动设备需要延迟约300ms执行,以判断用户是否是要双击。

2、验证

下面通过js代码来直观地验证click等事件的延迟

<div class="result">点我试试</div>

var starttime;
        //打印信息函数
        var log = function(msg) {
            var p = document.createelement('p');
            //计算触发事件
            //new date().gettime()  获取当前时间
            //new date().gettime()-starttime  获取事件响应与touchstart的时间差
            p.innerhtml = (new date().gettime())+" : "+(new date().gettime()-starttime)+" : "+msg;
            //添加到页面中中
            document.body.appendchild(p);
        }
        //触屏
        var touchstart = function(){
            starttime = new date().gettime();
            log('touchstart');
        }
        //触屏结束
        var touchend = function() {
            log('touchend');
        }
        //鼠标按下
        var mousedown = function() {
            log('mousedown');
        }
        //鼠标点击
        var mouseclick = function(){
            log('mouseclick');
        }
        //鼠标弹起
        var mouseup = function() {
            log('mouseup');
        }
    var result = document.queryselector('.result');
    //绑定事件
    result.addeventlistener('mousedown',mousedown);   //先绑定pc端点击事件
    result.addeventlistener('click',mouseclick);
    result.addeventlistener('mouseup',mouseup);
    result.addeventlistener('touchstart',touchstart);//绑定移动端事件
    result.addeventlistener('touchend',touchend);   

移动端click延迟和tap事件

移动端 时间响应原则:优先响应移动端独有事件。

二、解决办法

1、使用touch事件模拟click事件

如下使用touchstart和touched封装了一个移动端的tap事件

var idcast = {
        //传入dom元素
        tap:function(dom,callback) {
            //判断是否传入了dom元素,或者dom元素是否是一个对象
            if(!dom||typeof dom != "object"){
                return;
            }
            var startx,starty,time,movex,movey,distancex,distancey;
            dom.addeventlistener("touchstart",function(e) {
                if(e.targettouches.length>1) {
                    return;
                }
                startx = e.targettouches[0].clientx;
                starty = e.targettouches[0].clienty;
                time = date.now();
            });
            dom.addeventlistener("touchend",function(e) {
                if(e.changedtouches.length>1) {//说明不止一个手指
                    return;
                }
                //判断时间差异
                if(date.now()-time>150){//长按操作
                    return;
                }
                //获取松开手指的时候的坐标与触摸开始时的坐标差异
                movex = e.changedtouches[0].clientx;
                movey = e.changedtouches[0].clienty;
                distancex = movex - startx;
                distancey = movey - starty;
                //判断坐标差异
                if(math.abs(distancex) < 6 && math.abs(distancey) <6) {//说明是点击而非滑动
                    //执行tap事件相应之后的处理操作
                    //若函数不为空才调用
                    callback&&callback(e);
                    console.log("移动端点击单击事件--tap事件");
                }
            })
        }
    }

可以直接调用idcast中tap方法。

2、使用zepto中已经封装好的tap事件直接调用

$(menubox).on("tap",callback)

zepto下载链接: