jQuery -- touch事件滑动判断---左右上下方向

最新推荐文章于 2022-06-16 10:13:10 发布

天天睡觉qwq

最新推荐文章于 2022-06-16 10:13:10 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： touch

本文链接：https://blog.youkuaiyun.com/qq_41981057/article/details/89470615

jquery 专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了如何使用jQuery处理touch事件，特别是如何判断用户的滑动方向，包括左右和上下。通过监听touchstart和touchmove事件，结合坐标变化来实现滑动方向的判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		  //定义变量，用于记录坐标和角度

 var startx,starty,movex,movey,endx,endy,nx,ny,angle;

// //开始触摸函数，event为触摸对象

		    function touchs(event){
		    	console.log(JSON.stringify(event.target))
		        //阻止浏览器默认滚动事件
		        event.preventDefault();
		        //获取DOM标签
		        var box = document.getElementById('box');
		        //通过if语句判断event.type执行了哪个触摸事件
		        if(event.type=="touchstart"){
		             console.log('开始');
		             //获取开始的位置数组的第一个触摸位置
		            var touch = event.touches[0];
		             //获取第一个坐标的X轴
		            startx = Math.floor(touch.pageX);
		            //获取第一个坐标的X轴
		            starty = Math.floor(touch.pageY);
		            //触摸中的坐标获取
		        }else if(event.type=="touchmove"){
		             console.log('滑动中');
		            var touch = event.touches[0];
		            movex = Math.floor(touch.pageX);
		            movey = Math.floor(touch.pageY);
		            //当手指离开屏幕或系统取消触摸事件的时候
		        }else if(event.type == "touchend" || event.type == "touchcancel"){
		            //获取最后的坐标位置
		            endx = Math.floor(event.changedTouches[0].pageX);
		            endy = Math.floor(event.changedTouches[0].pageY);
		            console.log('结束');
		             //获取开始位置和离开位置的距离
		            nx = endx-startx;
		            ny = endy-starty;
		            //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
		            angle = Math.atan2(ny, nx) * 180 / Math.PI;
		            if(Math.abs(nx)<=10 ||Math.abs(ny)<=1){
		                console.log('滑动距离太小');
		                return false;
		            }
//		            //通过滑动的角度判断触摸的方向
		            if(angle<45 && angle>=-45){
			            console.log('右滑动');
		                return false;
		            }else if(angle<135 && angle>=45){
		                console.log('下滑动');
		                return false;
		            }else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
		            	 console.log('左滑动');
		               	 return false;
		            }else if(angle<=-45 && angle >=-135){
		                console.log('上滑动');
		                return false;
		            }
		        }
		    }

	    //添加触摸事件的监听，并直行自定义触摸函数

 			var body = document.getElementsByTagName("body")[0];
		    body.addEventListener('touchstart',touchs,false);
		    body.addEventListener('touchmove',touchs,false);
		    body.addEventListener('touchend',touchs,false);