手机触屏和滑动事件的封装

        function MobileEvent(domObj){
               return{
                   tap:function(callback){
                       var startx, starty, startTime,
                           endx,endy,endTime;
                    domObj.addEventListener("touchstart",function(e){
                        if(e.targetTouches.length>1){
                            return;
                        }
                        startx=e.targetTouches[0].clientX;
                        starty=e.targetTouches[0].clientY;
                        startTime=Date.now();
                        
                    })
                    domObj.addEventListener("touchend",function(e){
                        if(e.targetTouches.length>1){
                            return;
                        }
                        // console.log(e);
                        endx=e.changedTouches[0].clientX;
                        endy=e.changedTouches[0].clientY;
                        endTime=Date.now();
                        if(Math.abs(endx-endx)>5||Math.abs(endy-endy)>5){
                            return;
                        }
                        if(endTime-startTime>200){
                            return;
                        }
                        //调用回调函数
                        callback&&callback();
                        
                    })
 
                       
                   },
                   swipe:function(callback){
                       var startx, starty, startTime,
                       endx,endy,endTime,direction="";
                       domObj.addEventListener("touchstart",function(e){
                           if(e.targetTouches.length>1){
                               return;
                           }
                           startx=e.targetTouches[0].clientX;
                           starty=e.targetTouches[0].clientY;
                           startTime=Date.now();
                       })
                       domObj.addEventListener("touchend",function(e){
                           if(e.targetTouches.length>1){
                               return;
                           }
                           endx=e.changedTouches[0].clientX;
                           endy=e.changedTouches[0].clientY;
                           endTime=Date.now();
                           
                           if(Math.abs(endx-startx)>60&&Math.abs(endx-startx)>Math.abs(endy-starty)){
                                  direction=endx>startx?"right":"left";
                           }else if(Math.abs(endy-starty)>60&&Math.abs(endy-starty)>Math.abs(endx-endx)){
                                  direction=endy>starty?"bottom":"top";
                           }else{
                               return;
                           }
                           //调用回调函数
                       callback&&callback(direction);
                       })



                       
                   }
               }
        }
        var box=document.querySelector(".box");
        // MobileEvent(box).tap(function(){
        //     console.log("出发了")
        // });
        MobileEvent(box).swipe(function(direction){
            switch(direction){
                case"left":
                console.log("left");
                break;
                case"right":
                console.log("right");
                break;
                case"top":
                console.log("top");
                break;
                case"bottom":
                console.log("bottom");
                break;
            }
        })
    </script>
    ```
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值