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 http-equiv="X-UA-Compatible" content="ie=edge">
<title>Touch 触摸事件</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 监听触摸开始事件
div.addEventListener('touchstart', function() {
console.log('touchstart 开始触摸');
});
// 3. 监听触摸移动事件
div.addEventListener('touchmove', function() {
console.log('touchmove 触摸移动');
});
// 4. 监听触摸结束事件
div.addEventListener('touchend', function() {
console.log('touchend 抬起手指');
});
</script>
</body>
</html>
调试注意事项
在桌面浏览器中测试时，默认处于普通浏览模式，无法直接触发触摸事件。需通过开发者工具切换至设备模拟模式（快捷键 Ctrl + Shift + M），模拟真实移动设备的触摸环境，否则控制台将不会输出任何日志。