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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_43414945/article/details/90268247
        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>
    ```

猜你喜欢

转载自blog.csdn.net/weixin_43414945/article/details/90268247
今日推荐