移动端触屏事件需区分多点触控、正确使用TouchEvent对象及preventDefault()：优先取event.touches[0].pageX/Y获取坐标，touchstart中按需拦截默认行为，校验touches.length避免手势冲突，并显式设置passive: false以保障控制权。
移动端触屏事件（touchstart、touchmove、touchend）和鼠标事件不同，核心在于多点触控、事件对象结构差异以及默认行为干扰。正确处理的关键是理解 TouchEvent 对象、阻止不必要的默认行为、合理使用 preventDefault()，并注意兼容性和性能。
获取准确的触摸点坐标
不要用 clientX/clientY 直接替代鼠标坐标——虽然可用，但更推荐从 touches 列表中取值，尤其涉及多指操作时：
-
event.touches[0].pageX/pageY：当前所有接触点中第一个点的页面坐标（最常用） -
event.targetTouches[0].pageX：仅限当前事件目标元素上的触摸点（更安全，避免跨元素误读） -
event.changedTouches[0].pageX：本次事件中发生变化的触摸点（如刚按下、刚抬起、移动中），touchmove和touchend中特别有用
慎用 preventDefault()，按需拦截默认行为
移动端浏览器对触摸有强默认行为（如滚动、缩放、长按菜单），preventDefault() 能禁用它们，但滥用会导致体验问题：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 只在明确需要自定义交互时调用，例如实现拖拽、轮播、画板等
- 在
touchstart中判断是否进入“手势意图”（如位移阈值 > 5px），再决定是否preventDefault()；否则保留原生滚动 - 不要在
touchmove中无条件调用，否则页面无法滚动；建议结合{ passive: false }注册监听器，否则 Chrome 会忽略preventDefault()
区分单点与多点，避免手势冲突
用户可能双指缩放或三指滑动，而你的逻辑只期望单指操作：
立即学习“Java免费学习笔记（深入）”；
- 在
touchstart中检查event.touches.length，若 ≠ 1，可直接 return 或走其他逻辑 - 在
touchmove中持续校验，防止用户中途加指导致状态错乱 - 若需支持多点（如双指旋转），优先使用
getBoundingClientRect()+ 向量计算，而非依赖单点偏移
补充：基础监听写法与常见坑
注册事件时推荐显式设置选项，避免被动监听限制：
- 用
element.addEventListener('touchstart', handler, { passive: false })确保能调用preventDefault() - 避免同时绑定
click和touchstart，否则可能触发两次；可用touchstart+preventDefault()抑制后续 click - 记得在
touchend或touchcancel中清理临时状态（如记录的起始坐标、定时器、requestAnimationFrame）
