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


