touchmove 中必须用 changedtouches[0] 因为 touches 表示当前所有触点，可能为空；changedtouches 保证包含本次事件变化的触点，更可靠。
为什么 touchmove 里必须用 changedTouches[0] 而不是 touches[0]
在 touchmove 中直接读 touches[0] 是高频报错源头，典型错误是 Cannot read property 'clientX' of undefined。这是因为 touches 表示“当前仍在屏幕上的所有手指”，而用户快速划过、中途抬起某根手指（尤其多点操作时），touches.length 可能瞬间归零；但 changedTouches 保证包含本次事件中状态变化的手指——哪怕只是微小位移，它也一定有数据。
正确做法始终是：
- 优先取
event.changedTouches[0]获取本次触发该次touchmove的触点 - 仅当需要判断是否多点（如双指缩放）才查
event.touches.length - 若需限定在当前元素内响应（避免父层遮罩干扰），改用
event.targetTouches[0]，它只返回落在目标元素上的触点 - 任何取数组元素前必须判空：
if (e.changedTouches.length > 0) { ... }
preventDefault() 在 touchmove 里加还是不加？
加错位置比不加更糟：加了可能让页面无法滚动、click 彻底失效；不加又会导致轮播图拖拽时页面跟着乱滚。关键看控制意图：
- 必须加：
touchmove回调开头立即调用，前提是你要完全接管该方向的滑动（如横向轮播、抽屉菜单），且明确要阻断浏览器默认滚动 - 必须不加：按钮、链接等可点击区域，除非你同时实现了自定义点击逻辑（否则
click永远不会来） - 折中方案：绑定监听器时显式声明
{ passive: false }，既允许调preventDefault()，又避免 Chrome 报 “Unable to preventDefault inside passive event listener” - 更早拦截：CSS 层面加
touch-action: pan-y（只允许竖向滚）或touch-action: none（完全交由 JS 处理），比 JS 拦截更及时、更稳定
怎么可靠区分“滑动”和“点击”？
单靠位移阈值（如 Math.abs(deltaX) > 10）或时间阈值（如 duration > 150ms）都容易误判——慢速长按后突然滑动、或快速点按因屏幕延迟产生微偏移，都会崩坏逻辑。
推荐组合策略：
- 在
touchstart记下startX、startY和Date.now() - 在
touchmove中只要发生任意有效位移（Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2），就设isMoved = true - 在
touchend或touchcancel中检查：if (!isMoved)则视为点击，可触发模拟click；否则按滑动处理 - 若需方向判定（如只响应水平滑动），再叠加
Math.abs(deltaX) > Math.abs(deltaY) * 1.5，避免斜向误触发
移动端绑定触摸事件的硬性前提
有些设备（尤其老版安卓 WebView 或 iOS Safari）对非交互元素（如 div）的 touchstart 不响应，不是代码问题，而是渲染层未开启触摸捕获。
- 确保目标元素有
cursor: pointer（CSS），这是最轻量的兼容补丁 - 必须设置
<meta name="viewport" content="width=device-width, initial-scale=1">，否则部分 iOS 会禁用触摸事件 - 监听器绑定必须带
{ passive: false }，尤其touchmove，否则 Chrome / Safari 会静默忽略preventDefault() - 别忘了监听
touchcancel—— 它会在来电、弹窗、系统中断时触发，此时必须重置所有缓存状态（startX、isMoved等），否则下次触摸直接错乱
坐标取值优先用 pageX/pageY，它基于文档左上角，不受页面滚动影响；clientX/clientY 在页面滚动后会失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
