1.触摸事件

• touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
• touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
• touchend：当手指从屏幕上移开时触发。
• touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。 上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在 DOM 规范中定义，但它们却是以兼容 DOM 的方式实现的。因此，每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。

除了常见的 DOM 属性外，触摸事件还包含下列三个用于跟踪触摸的属性。

• touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
• targetTouchs：特定于事件目标的 Touch 对象的数组。
• changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。

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

• clientX：触摸目标在视口中的 x 坐标。
• clientY：触摸目标在视口中的 y 坐标。
• identifier：标识触摸的唯一 ID。
• pageX：触摸目标在页面中的 x 坐标。
• pageY：触摸目标在页面中的 y 坐标。
• screenX：触摸目标在屏幕中的 x 坐标。
• screenY：触摸目标在屏幕中的 y 坐标。
• target：触摸的 DOM 节点目标。

例子：

function handleTouchEvent(event) {  
    if (event.touches.length === 1) { // 只跟踪触摸1次  
        var output = document.getElementById('output');  
        switch (event.type) {  
            case 'touchstart': // 触摸开始  
                output.innerHTML = "Touch started" + event.touches[0].clientX + ',' + event.touches[0].clientY;  
                console.log(event.touches);  
                break;  
            case 'touchend':// 触摸结束  
                output.innerHTML = "Touch end" + event.touches[0].clientX + ',' + event.touches[0].clientY;  
                break;  
            case 'touchmove'://触摸连续触发  
                output.innerText = "Touch move" + event.touches[0].clientX + ',' + event.touches[0].clientY;  
        }  
    }  
}  
document.ontouchstart = function (ev) {  
    handleTouchEvent(ev)  
};  
document.ontouchend = function (ev) {  
    handleTouchEvent(ev)  
};  
document.ontouchmove = function (ev) {  
    handleTouchEvent(ev)  
}  

2.手势事件

iOS 2.0 中的 Safari 还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别介绍如下。

• gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
• gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
• gestureend：当任何一个手指从屏幕上面移开时触发。

只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。

触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发 touchstart 事件。如果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件，随后触发基于该手指的 touchstart 事件。如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件。但只要有一个手指移开， 就会触发 gestureend 事件，紧接着又会触发基于该手指的 touchend 事件。 与触摸事件一样，每个手势事件的 event 对象都包含着标准的鼠标事件属性：bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。此外，还包含两个额外的属性：rotation 和 scale。其中，rotation 属性表 示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从 0 开始）。而 scale 属性表示两个手指间距离的变化情况（例如向内收缩会缩短距离）；这个值从 1 开始，并随距离拉大而 增长，随距离缩短而减小。