zoukankan      html  css  js  c++  java
  • 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);
            }) 
        
        }
  • 相关阅读:
    zoj 2001 Adding Reversed Numbers
    hdu 2391 Filthy Rich (简单dp)
    hdu 1128 (hash)
    华为交换机有关BGP的相关配置
    Cent os 6.8添加中文字体
    Liunx之始
    自己鼓励自己
    UML用例图中包含(include)、扩展(extend)和泛化(generalization)三种关系详解(转载)
    20091125心情感觉还不错
    DataTable 行列转换
  • 原文地址:https://www.cnblogs.com/cythia/p/6928364.html
Copyright © 2011-2022 走看看