绝大多数情况该用 event.targetTouches[0]，因其只返回落在当前绑定元素上的手指，避免跨区域干扰；pageX/pageY 更稳定，不受滚动影响；touchend 中必须用 changedTouches[0]；所有读取前需判断 length > 0；preventDefault() 应在 touchstart 中按需调用。
touchstart/touchmove 里该读 touches 还是 targetTouches？
绝大多数情况该用 event.targetTouches[0]，而不是 event.touches[0]。前者只返回落在当前绑定元素上的手指，后者是全屏所有手指——如果页面有多个可触控区域（比如轮播图+底部菜单），touches 可能混入其他区域的手指，导致坐标错乱或逻辑误判。
常见错误现象：手指在 A 区域按下，滑动到 B 区域后仍被当作 A 的拖拽继续响应；或者双指操作时单指抬起后 touches[0] 突然变成另一根手指，造成坐标跳变。
- 始终优先用
event.targetTouches，它和事件绑定目标严格对齐 - 若需支持多指（如双指缩放），再考虑
event.touches，但必须按identifier匹配手指生命周期 -
event.changedTouches仅用于识别“本次刚按/刚抬”的手指，比如touchend中必须用它，否则可能读到已离开的手指
pageX/pageY 和 clientX/clientY 到底该选哪个？
pageX/pageY 是更稳的选择。它们以整个文档左上角为原点，不受页面滚动影响；而 clientX/clientY 以视口左上角为原点，一旦页面滚动，数值会突变——这在实现拖拽、滑块、画布等需要连续坐标的场景中极易出 bug。
使用场景举例：一个固定定位的弹窗内做手势识别，用户边滚动页面边操作弹窗。此时用 clientX 会因滚动偏移导致手势轨迹断裂；用 pageX 就能保持坐标连贯。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 拖拽、滑动、手势识别类逻辑，一律用
pageX/pageY - 仅当你要做“相对于当前可视区”的快速定位（如 tooltip 跟随手指）且确保不滚动时，才考虑
clientX/clientY - 别忘了加空值判断：
if (event.targetTouches.length > 0) { const t = event.targetTouches[0]; ... }
touchend 事件里为什么不能直接用 targetTouches[0]？
因为手指已经抬起，event.targetTouches 此时为空数组——targetTouches 只包含“当前仍接触目标元素”的手指，touchend 触发时它已不满足条件。这时候必须用 event.changedTouches[0]，它明确记录了“本次事件中状态变化的手指”，也就是刚刚抬起的那一根。
典型错误：在 touchend 回调里写 const t = event.targetTouches[0]，结果报 Cannot read property 'pageX' of undefined。
-
touchstart：用targetTouches[0]记初始位置 -
touchmove：继续用targetTouches[0]跟踪同一根手指 -
touchend：切到changedTouches[0]获取抬起位置 - 所有读取前都加
length > 0判断，避免运行时错误
preventDefault() 什么时候该加、什么时候不该加？
加 event.preventDefault() 是为了阻止浏览器默认行为，比如页面滚动、缩放、选中文本。但它是一把双刃剑：加得太早或太宽泛，会导致用户无法正常滚动页面；加得太晚（比如在 touchmove 中延迟判断），又可能已被系统拦截。
性能与兼容性影响：iOS Safari 对 preventDefault 更敏感，未及时调用可能导致 touchmove 不触发；Android Chrome 则相对宽松，但过度调用会破坏原生滚动惯性。
- 若你只响应轻点（tap），通常不需要
preventDefault - 若做拖拽、滑动、自定义滚动，应在
touchstart中就调用，否则后续touchmove可能收不到 - 不要在全局监听器里无条件调用，应绑定到具体元素，并结合业务逻辑判断是否真的要禁用默认行为
- 现代方案可配合
{ passive: false }选项显式声明，避免浏览器优化掉你的preventDefault
