最近做了一个需求总共只有两屏，要求首屏触摸滑动到第二屏时就要取消触摸滑动事件。一般来说移动端网站的内容触摸滑动我们都会选择不依赖框架的Swiper来实现，但考虑到小需求下我们就没有必要去使用它，正好借这个机会去了解一下touch事件。
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
- touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
- touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
- touchend事件：当手指从屏幕上离开的时候触发。
触摸事件下面有三个用于跟踪触摸的属性：
- touches：表示当前跟踪的触摸操作的touch对象的数组。
- targetTouches：特定于事件目标的Touch对象的数组。
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下：
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
var ele = doc.querySelector('.screnn_0'),//触摸的Dom对象
start = {},//touchstart当手指触摸屏幕时候存放最后的x、y坐标值
end = {};//touchend当手指从屏幕上离开的时候存放最后的x、y坐标值
ele.addEventListener('touchstart',function(event){
var touch = event.changedTouches[0];
start = {
y : touch.clientY
}
}, false );
ele.addEventListener('touchend',function(event){
var touch = event.changedTouches[0];
end = {
y : touch.clientY
}
var z = end.y - start.y;
if(z < 0 && (Math.abs(z) > 100) ){
//nextStep(); 执行操作的方法
}
}, false );touchend的最后坐标减去touchstart的起始坐标。
y的结果如果正数，则说明手指是从上往下划动；
y的结果如果负数，则说明手指是从下往上划动;
Math.abs(x)取得正数和负数的绝对值，来判断滑动的距离。
横向划动就是X坐标，就以上面的例子以此类推即可。
