必须成套监听touchstart/touchmove/touchend并在touchstart中preventDefault，位移计算始终用event.touches[0]而非changedTouches[0]，阻止滚动后需手动实现惯性、边界和回弹逻辑。
touchstart / touchmove / touchend 三个事件必须成套监听
单独绑定 touchmove 没用，因为浏览器默认会触发滚动，touchmove 事件会被吞掉或延迟触发。必须在 touchstart 中调用 event.preventDefault()，且需确保该次触摸流（同一根手指）后续的 touchmove 和 touchend 能被持续捕获。
常见错误是只在 touchmove 里 preventDefault，结果 iOS Safari 下完全不触发，Android Chrome 则可能部分触发但卡顿。
- 监听三者时，建议用同一个事件处理器或共享状态变量（如
isDragging = true） - 务必检查
event.touches.length === 1，避免多指操作干扰单滑动逻辑 - 在
touchstart中记录event.touches[0].clientX和clientY作为起点
计算位移要用 touches[0]，别用 changedTouches[0]
touches 是当前所有接触点的实时列表；changedTouches 只包含本次事件中“发生变化”的触点（比如刚按下的、刚抬起的）。滑动过程中，changedTouches 可能为空或不稳定——尤其在快速移动或系统优化下，iOS 有时会合并多次 touchmove。
所以位移计算必须基于 event.touches[0] 的坐标差，否则会出现跳变、卡顿或方向误判。
立即学习“前端免费学习笔记（深入）”；
let startX = 0;
element.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});
element.addEventListener('touchmove', e => {
const currentX = e.touches[0].clientX;
const diffX = currentX - startX;
// ✅ 正确：始终用 touches[0]
// ❌ 错误：e.changedTouches[0]?.clientX 不可靠
});移动端 scroll 阻止后要手动处理惯性与边界
调用 preventDefault() 后，原生滚动失效，你得自己实现滑动反馈——包括速度衰减、回弹、边界吸附。这不是加个 transform: translateX() 就完事的。
- 仅靠
touchmove实时更新位置，松手后页面会突然“卡住”，用户感知极差 - 必须在
touchend中读取最后一次velocityX（用时间差和位移算），再用requestAnimationFrame做缓动动画 - 边界处理要区分：内容未到头时禁止继续拖拽（
overscroll-behavior: contain可辅助，但不兼容旧版 iOS） - Android 和 iOS 对
touch-action: none的支持差异大，建议在容器上显式设置：style="touch-action: pan-x;"（允许水平滚动，禁用缩放/双击）
不要直接用 touch API 做轮播图，优先考虑 CSS scroll-snap 或第三方库
手写 touchstart/move/end 处理轮播，90% 的项目会踩到这些坑：iOS 15+ 的 touch 事件节流、Safari 的 passive event 默认行为、Chrome 的 pointer events 降级兼容、不同设备的 touch slop（触发阈值）不一致。
真正稳定的做法是：
- 用
overflow-x: scroll+scroll-snap-type: x mandatory，配合scrollTo()和scrollend事件（注意 Safari 16.4+ 才支持scrollend） - 或用轻量库如
keen-slider、swiper（v11+ 已默认启用 passive: false 并做 polyfill） - 若必须手写，至少封装一个基础类，统一处理
getTouchPos()、isHorizontalSwipe()、preventScroll()等逻辑，别在每个组件里重复判断
touch API 是底层能力，不是交互方案。它暴露的是原始输入，不是“滑动”这个语义动作——中间那层抽象，得你自己补全。
