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

 

 

移动端触屏滑动的效果其实就是图片轮播，在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 @   三线码工  阅读(305)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示