JavaScript 触摸事件概述
touchstart、touchmove 和 touchend 是专为移动设备设计的核心触摸事件，用于监听用户的触摸行为。它们构成了完整的触摸生命周期，在移动端交互开发中至关重要。
touchstart 触摸开始事件
触发时机： 当用户的手指首次接触到屏幕（或指定元素）的瞬间立即触发，标志着一次触摸行为的正式开始。
关键特性：
- 每个触摸点仅触发一次，手指保持接触时不会重复触发。
- 适合记录初始坐标，为后续判断滑动方向做准备。
常用场景：
- 初始化手写板、画布涂鸦等业务逻辑。
- 触发元素的触摸激活状态，例如按钮按下时的高亮样式。
touchmove 触摸移动事件
触发时机： 当用户的手指保持与屏幕接触并发生位置移动时，会持续高频触发该事件，直到手指停止移动或离开屏幕。
关键特性：
- 移动过程中连续触发，频率由设备性能和手指移动速度决定。
- 事件对象会实时更新触摸点的当前位置。
常用场景：
- 实现滑动交互，如轮播图左右滑动、下拉刷新、侧边栏拖拽。
- 实时绘制轨迹跟随、涂鸦创作。
- 悬浮按钮随手指移动等跟随效果。
touchend 触摸结束事件
触发时机： 当用户的手指从屏幕上抬起（完全离开触摸区域）的瞬间触发，标志着一次触摸行为的结束。
关键特性：
- 每个触摸点仅触发一次，事件对象中仍可获取该触摸点离开前的最后位置信息。
常用场景：
- 结束滑动逻辑并判断结果，如轮播图滑动后定位到目标页面。
- 保存手写绘制或涂鸦的最终内容。
- 恢复元素的初始状态，如按钮抬起后取消高亮。
- 触发触摸结束后的业务回调，例如滑动完成后的数据加载。
代码示例
以下是一个基础示例，演示如何监听这三个事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta = =>
Touch 触摸事件