html5移动端触摸事件touch

移动端主要的触摸事件有三个：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

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

touchend事件：当手指从屏幕上离开的时候触发。

还有一个有待验证的：

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切触发时间，文档中并没有具体说明，咱们只能去猜测了。

由于手机端的手指触发不是单个的，所以在event里面生成的与触摸有关的数据都是以数组的形式列出来的，有以下三个：

touches：表示当前跟踪的触摸操作的touch对象的数组。当前屏幕上所有触摸点的集合列表

targetTouches：特定于事件目标的Touch对象的数组。绑定事件的那个结点上的触摸点的集合列表

changedTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。触发事件时改变的触摸点的集合

举例来说，比如div1, div2只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch，然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

每个数组Touch对象包含的属性如下。
　　clientX：触摸目标在视口中的x坐标。
　　clientY：触摸目标在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：触摸目标在页面中的x坐标。
　　pageY：触摸目标在页面中的y坐标。
　　screenX：触摸目标在屏幕中的x坐标。
　　screenY：触摸目标在屏幕中的y坐标。
　　target：触目的DOM节点目标。

每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。兼容性：所有浏览器均支持
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 不随页面滚动而改变 兼容性：所有浏览器均支持。
pageX：参照点也是浏览器内容区域的左上角 会随着页面滚动而改变 兼容性：除IE6/7/8不支持外，其余浏览器均支持

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

下面是一个非常简单的案例

var obj = document.getElementById('id');   
obj.addEventListener('touchstart', function(event) {   
     // 如果这个元素的位置内只有一个手指的话   
    if (event.targetTouches.length == 1) {   
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要    
        var touch = event.targetTouches[0];   
        // 把元素放在手指所在的位置   
        alert('触发点击事件')   
        }   
}, false);