HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Saf
HTML5在移动端开发中引入了触摸事件，以适应无鼠标键盘的移动设备，尤其是iOS和Android设备。这些事件包括`touchstart`、`touchmove`、`touchend`和`touchcancel`，它们弥补了传统鼠标和键盘事件在移动设备上的不足。
1. `touchstart`事件：当用户手指首次接触屏幕时触发。即使已有手指在屏幕上，再次触摸也会触发该事件。此事件可用于检测用户开始与界面交互的时刻。
2. `touchmove`事件：当用户手指在屏幕上移动时持续触发。通过调用`event.preventDefault()`，可以在`touchmove`事件处理函数中阻止页面滚动，从而实现自定义的拖动效果。
3. `touchend`事件：当用户手指从屏幕上移开时触发，标志着一次触摸操作结束。开发者常利用此事件来处理用户松手后的操作，如按钮点击等。
4. `touchcancel`事件：当系统因某种原因停止跟踪触摸时触发，例如手指快速滑过屏幕边缘。具体的触发条件在文档中未明确说明，但通常发生在系统无法正确识别触摸的情况下。
这些触摸事件具有冒泡特性，可被取消，并且遵循DOM事件处理机制。每个触摸事件的`event`对象携带了DOM事件常见的属性，如`bubbles`、`cancelable`、`clientX/Y`、`screenX/Y`等。此外，触摸事件还特有以下与触摸跟踪相关的属性：
- `touches`：记录所有当前活跃的触摸操作，是一个`Touch`对象的数组。
- `targetTouches`：仅包含与事件目标（即触发事件的DOM元素）相关的`Touch`对象。
- `changedTouches`：表示自上一次触摸事件以来发生变化的`Touch`对象数组，通常用于追踪触摸的最新状态。
每个`Touch`对象包含的详细信息有：
- `identifier`：标识特定触摸的唯一ID。
- `clientX/Y`：触摸点在视口内的坐标，不考虑页面滚动。
- `pageX/Y`：触摸点在完整页面的坐标，包括滚动距离。
- `screenX/Y`：触摸点在屏幕坐标系中的位置。
- `target`：被触摸的DOM元素。
此外，还有`radiusX/radiusY/rotationAngle`属性，用来描述触摸点的形状和旋转，但在某些浏览器中可能不被支持。
以下是一个简单的JavaScript示例，展示了如何在`touchmove`事件中根据手指位置移动元素：
```javascript
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止默认行为
var touch = event.targetTouches[0];
obj.style.left = touch.pageX - 50 + 'px'; // 移动元素至手指位置
obj.style.top = touch.pageY - 50 + 'px';
}
});
```
这段代码将监听元素的`touchmove`事件，当单个手指触摸时，元素会跟随手指移动。
理解并有效地利用这些触摸事件，可以帮助开发者创建更具互动性和响应性的移动Web应用，提高用户体验。随着设备和浏览器对HTML5的支持度不断提高，触摸事件的应用将更加广泛。
