tap事件的原理详解

点击事件延迟问题所在:

在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件

为什么要解决:

随着h5游戏,移动端网页的流行,用户对web网页的性能也随着提高,点击事件的延迟会影响用户体验,尤其是在游戏中,这是个大忌.

这是因为这个问题的存在,所以出现了tap事件,tap事件对应的是在移动端中的.

tap事件的原理:

tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touchmove的距离距离touchstar的距离为0,并且点击的时间不超过某个设定的时间值,超过该时间值的话,就属于长按了

下面我封装了一个事件,模拟tap事件的原理:

    //封装tap的方法

    function tap(ele,callBack){

        //触摸开始的时间

        var startTime=0;

        //定义touchmove是否触发

        var ismove=false;

        var maxTime=250;

        ele.addEventListener('touchstart',function(e){

            startTime=Date.now();

            ismove=false;

        })

        ele.addEventListener('touchmove',function(e){

            //触发就赋值为true

            ismove=true;

        })

        ele.addEventListener('touchend',function(e){

            //判断是否是touchmove是否触发

            if (ismove) {

                return;

            }

            // 判断是否为长按

            if ((Date.now()-startTime)>maxTime) {

                return;

            }

        // 如果能够到这里

        callBack(e);

        }) 

    }

巴特西

tap事件的原理详解

最新文章

热门文章