移动端tap轻触事件封装


  1. function my_tap(dom,callBack){  
    //第一不能超过延时时间,第二不能使移动  
    //获取一些必要的值开始时间,延时时间,是否是移动  
        var startTime=0;  
        var delayTime=200;  
        var isMove=false;  
        dom.addEventListener("touchstart",function(event){  
            //记录开始时间  
            startTime=Date.now();  
        });  
        dom.addEventListener("touchmove",function(event){  
            //如果发生了移动就改变isMove的值  
            isMove=true;  
        });  
        dom.addEventListener("touchend",function(event){  
            //如果发生了移动就不执行回调  
            if(isMove) return;  
            //如果大于延时时间就不执行回调函数  
            if(Date.now()-startTime>delayTime) return;  
            callBack(event);  
      
        });  
      
      
    }  

    在移动端(这里小编还是强调一下把页面变成移动端页面千万别忘记视口属性viewport的设置)中我们的浏览器只认识三个事件(touchstart、touchmove、touchend),而我们使用其他的框架封装的事件全都是使用这三个事件来封装来的,那么我们接下来就给大家拿一个实例来分析一下如何使用这三个基础的函数来进行封装!

       好现在我们来分析一下整个函数封装的思路:如果是轻敲的话那必须满足两个条件:1.按住的事件不能超过延时时间2.不能再页面中移动,也就是说不能出发touchmove事件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值