在移动端判断手指的移动方向

 

 

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是touch事件

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

一般吧下列代码写上，具体意思可以参照写了另一篇文章

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title></title>
        <style type="text/css">
            div {
                height: 140px;
                width: 100%;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>

        </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            
            var startX,startY,moveX,moveY
            //touchstart : 手指放到屏幕上时触发
            $("div").on("touchstart", function(event) {
                // 判断默认行为是否可以被禁用
                if(event.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if(!event.defaultPrevented) {
                        event.preventDefault();
                    }
                }
                //触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch
                startX = event.originalEvent.changedTouches[0].pageX,
                startY = event.originalEvent.changedTouches[0].pageY;
            //刚触摸屏幕时可以弹出我们的坐标，看一下效果    
//                alert(startX+" "+startY)
            });
            
            $("div").on("touchmove", function(event) {
                // 判断默认行为是否可以被禁用
                if(event.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if(!event.defaultPrevented) {
                        event.preventDefault();
                    }
                }
                //触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch
                moveX = event.originalEvent.changedTouches[0].pageX,
                moveY = event.originalEvent.changedTouches[0].pageY;
                //我们刚开始可以把坐标输出到页面当中，每当我们按住屏幕移动一下，坐标都会变动。moveX，moveY值就是当我们离开屏幕时的值，
                //document.getElementsByTagName("div")[0].innerHTML=(moveX+" "+moveY)
            });
            
            
            //离开屏幕的那一瞬间            
            $("div").on("touchend", function(e) {
                // 判断默认行为是否可以被禁用
                if(e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if(!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }
//                开始的x坐标-最后的坐标，大于20，说明向右移动了20像素以上（因为一般要防止客户误）
                if ((startX-moveX)>20) {
                    alert("<--")
                } else if((startX-moveX)<-20){
                    alert("-->")
                }else{
                    alert("没有左右移动或移动的距离不大于20")
                }
                
                if ((startY-moveY)>20) {
                    alert("上")
                } else if((startY-moveY)<-20){
                    alert("下")
                }else{
                    alert("没有上下移动或移动的距离不大于20")
                }
            });
        </script>
        
    </body>

</html>

 

posted @ 2020-04-29 22:06  三线码工  阅读(291)  评论(0)  编辑  收藏  举报