HTML5的触屏事件有哪些？

HTML5 提供了以下触屏事件，用于处理用户的触摸屏交互：

• touchstart: 当手指触摸屏幕时触发。
• touchmove: 当手指在屏幕上移动时触发。
• touchend: 当手指离开屏幕时触发。
• touchcancel: 当触摸被中断时触发，例如，用户的手指移出了文档窗口，或者系统突然弹出一个对话框。

除了以上四个主要事件外，还有两个不太常用的事件：

• touchenter: 当触摸从屏幕外部移动到元素内部时触发。 类似于mouseover，但是只针对触摸。
• touchleave: 当触摸从元素内部移动到外部时触发。 类似于mouseout，但是只针对触摸。

这些事件提供了一个 TouchEvent 对象，其中包含有关触摸的信息，例如：

• touches: 当前屏幕上所有触摸点的列表，每个触摸点包含位置、id等信息。 即使有些触摸点不在当前元素上，也会包含在列表中。
• targetTouches: 当前目标元素上的所有触摸点的列表。
• changedTouches: 自上次事件以来发生变化的触摸点的列表。例如，在一个 touchend 事件中，changedTouches 列表将包含刚刚离开屏幕的触摸点。

通过这些事件和 TouchEvent 对象，开发者可以创建丰富的触屏交互体验，例如：

• 单指滑动/拖动： 使用 touchstart 记录初始位置，touchmove 计算移动距离并更新元素位置，touchend 结束操作。
• 多点触控： 使用 touches 列表跟踪多个触摸点，实现缩放、旋转等操作。
• 手势识别： 通过分析 touchmove 事件中的触摸轨迹，识别各种手势，例如轻扫、双击等。

需要注意的是，触屏事件和鼠标事件（mousedown, mousemove, mouseup 等）是独立的。如果需要同时支持触屏和鼠标操作，需要分别处理这两套事件。 有时浏览器也会为了兼容性，在触屏事件触发后触发模拟的鼠标事件，这可能会导致事件重复触发，需要开发者进行处理，例如通过 preventDefault() 阻止默认行为。