html5如何实现触摸滑动事件_ touch api使用详解【教程】_技术教程

必须成套监听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() 等逻辑，别在每个组件里重复判断