移动端js触摸touch详解（附带案例源码）
移动端触摸滑动原理详解案例，实现过程通过添加DOM标签的触摸事件监听，并计算触摸距离，通过距离坐标计算触摸角度，最后通过触摸角度去判断往哪个方向触摸的。
触摸的事件列表
触摸的4个事件：
touchstart 触摸屏幕上时触发
touchmove 触摸屏幕中滑动时触发
touchend 离开屏幕时触发
touchcancel 系统取消触摸事件的时候触发
监听触摸后触摸事件会实现一个event对象，这个对象里面包括3个触摸函数列表。
触摸事件里的3个函数：
touches 屏幕上所有手指列表
targetTouches 在当前DOM标签上手指的列表
changedTouches 涉及当前事件的手指的列表
触摸函数的属性，用于获取坐标
8个属性：
clientX 触摸目标在浏览器中的x坐标
clientY 触摸目标在浏览器中的y坐标
identifier 标识触摸的唯一ID。
pageX 触摸目标在当前DOM中的x坐标
pageY 触摸目标在当前DOM中的y坐标
screenX 触摸目标在屏幕中的x坐标
screenY 触摸目标在屏幕中的y坐标
target 触摸的DOM节点目标。
Math.atan2()函数，计算角度的弧度值
angel=Math.atan2(y,x)
x 指定点的 x 坐标
y 指定点的 y 坐标
angel是一个弧度值（可以比喻为直角三角形对角的角，其中 x 是邻边边长，而 y 是对边边长）
atan2(x,y)*180/Math.PI 转换为角度
触摸详细代码：
<html>
<head>
<meta charset="utf-8"/>
<title>touch test</title>
</head>
<body>
<div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
<script>
//定义变量，用于记录坐标和角度
var startx,starty,movex,movey,endx,endy,nx,ny,angle;
//开始触摸函数，event为触摸对象
function touchs(event){
//阻止浏览器默认滚动事件
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)<=1 ||Math.abs(ny)<=1){
return false;
console.log('滑动距离太小');
}
//通过滑动的角度判断触摸的方向
if(angle<45 && angle>=-45){
alert('右滑动');
return false;
}else if(angle<135 && angle>=45){
alert('下滑动');
return false;
}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
alert('左滑动');
return false;
}else if(angle<=-45 && angle >=-135){
alert('上滑动');
return false;
}
}
}
//添加触摸事件的监听，并直行自定义触摸函数
box.addEventListener('touchstart',touchs,false);
box.addEventListener('touchmove',touchs,false);
box.addEventListener('touchend',touchs,false);
</script>
</body>
</html>
