移动端触摸事件总结

移动端对于滑动手势一般是使用触摸事件进行处理。

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。

touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。

touchend:当手指从屏幕上移开时触发。

于是我们可以通过监听这类触摸事件来获取触摸点的各种信息。

touch.addEventListener(touchstart, startEvtHandler);
var startEvtHandler = function(e) {
// 默认传入event触摸事件对象
// 输出触摸点的x坐标
console.log(e.changedTouches[0].clientX);
console.log(e.targetTouches[0].clientX);
console.log(e.touches[0].clientX);
}

这时触摸一下屏幕会发现三个console输出的内容是一样的（但e.changedTouches等触摸事件在touchstart、touchmove和touchend监听事件中所表示的touch对象并不相同），那么changedTouches、targetTouches和touches又分别是什么呢？

touches:表示当前跟踪的触摸操作的Touch对象的数组。

targetTouches:特定于事件目标的Touch对象的数组。

changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性。

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

identifier：表示触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点坐标。

changedTouches、targetTouches和touches这三个数组的区别就在于其数组中各种存储的touch对象数量是不同的。

这幅图中只有div2绑定了touchstart事件，三根手指按照1、2、3的顺序触摸屏幕。在三根手指都触摸屏幕后，我们可以发现touches跟踪的是所有触摸事件，所以它里面有三个touch对象；而targetTouches跟踪的是div2区域内的触摸事件，所以它里面有两个touch对象；最后的changedTouches跟踪的是第一次触摸后的触摸事件，所以它里面有两个touch对象。

实际运用中一般使用e.changedTouches来监听，利用以上的知识我们就可以轻松地算出滑动距离。

var start = 0;
var startEvtHandler = function(e){
if (e.changedTouches.length == 1) {
start = e.changedTouches[0].clientX;
}
}

var endEvtHandler = function(e){
if (e.changedTouches.length == 1) {
console.log(e.changedTouches[0].clientX - start);
}

}
var startEvt, moveEvt, endEvt;
// 判断是移动端还是PC端
if("ontouchstart" in window){
startEvt="touchstart";
moveEvt="touchmove";
endEvt="touchend";
}else{
startEvt="mousedown";
moveEvt="mousemove";
endEvt="mouseup";
}
document.addEventListener(startEvt, startEvtHandler);
document.addEventListener(endEvt, endEvtHandler);