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

公孙威
2023-12-01
		  //定义变量,用于记录坐标和角度
 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);
 类似资料: