一些关于web移动端的触摸事件的总结

之前在写网页小游戏的时候，考虑了当用户在移动端设备上玩游戏的情况，所以接触到了移动端的触碰事件，下面总结一些经验给大家参考，如有问题，敬请指正。

关于触摸事件，w3c有相应的标准，可以参考https://www.w3.org/TR/touch-events/

下面介绍几种普遍使用的触摸事件：

1、touchstart

w3c的标准是这样解释的：when the user places a touch point on the touch surface.也就是当用户手指触摸屏幕的瞬间触发，其实从单词角度也非常容易理解就是触摸开始时触发。

2、touchend

相对于touchstart，touchend就是在触摸结束时触发。

w3c的描述是这样的： when the user removes a touch point from the touch surface, also including cases where the touch point physically leaves the touch surface, such as being dragged off of the screen.

w3c的描述中提到两种情况可认为是触发了触摸结束事件：

(1)当用户将手指抬起，用户的手指离开设备屏幕

(2)当触摸点到了用户屏幕以外也就是当用户手指从屏幕上一直移动，直到移出了屏幕边缘

3、touchmove

用户移动手指的过程中连续触发，w3c定义：when the user moves a touch point along the touch surface，当用户沿着触摸面移动触摸点时触发。

4、touchcancel
就是取消触摸事件，当有更高级别的事件发生时触发，比如有电话打进来，但是不同浏览器会有不同的含义。

其他事件

touchenter、touchleave

规范中曾经包含这两个事件，但现在没有了，这两个事件是在用户手指移入或移出某个元素时触发，但是大多数情况这两个事件并没有被实现。IE浏览器支持这两个事件。

每个触摸事件都包含三个列表，每个列表里包含了对应的触摸点：

(1)touches：包含了当前位于屏幕上的所有触摸点

(2)targetTouches：包含了当前位于DOM元素上的所有触摸点

(3)changedTouches：包含了关联当前事件的触摸点

而且每个触摸点又包含了以下属性：

(1)identifier：当前触摸点的编号，唯一的

(2)target：手指所触摸的DOM元素

(3)pageX：相对于页面的x坐标

(4)pageY：相对于页面的y坐标

(5)clientX：相对于视区的x坐标，也就是当事件被触发时鼠标指针相对于浏览器页面的水平坐标

(6)clientY：相对于视区的y坐标，也就是当事件被触发时鼠标指针相对于浏览器页面的垂直坐标

(7)screenX：相对于屏幕的x坐标

(8)screenY：相对于屏幕的y坐标

要注意的是，设备上的坐标系不同于数学中的坐标系：

屏幕坐标系的原点在屏幕的最左上方，向右方向为x轴的正方向，向下方向为y轴的正方向

这些触摸事件的使用的示例代码：

document.addEventListener('touchstart',function(event){
    var startx = event.touches[0].pageX;
    var starty = event.touches[0].pageY;
    
});
document.addEventListener('touchend',function(event){
    var endx = event.changedTouches[0].pageX;
    var endy = event.changedTouches[0].pageY;
}
document.addEventListener('touchmove',function(event){
	event.preventDefault();//阻止默认行为的发生
});

支持触摸事件的浏览器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG专有OS中的phantom浏览器。目前只有IOS版Safari支持多点触屏。桌面版Firefox 6+和Chrome也支持触摸事件。