移动端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   转换为角度

 

触摸详细代码：