精准控制事件传播时机与范围是避免touch事件冒泡误判致卡顿的核心，需明确起点、隔离区域、设置touch-action、合理使用stopPropagation和composedPath，并用滚动标志与时间窗口过滤无效touchend。
避免因 touch 事件冒泡路径误判导致的页面卡顿，核心在于**精准控制事件传播时机与范围**，而非简单阻止或放任。冒泡本身不是问题，误判触发链、在错误节点重复响应、或让高频率 touchmove 持续穿透到深层监听器，才会引发主线程过载和渲染抖动。
明确冒泡起点，隔离交互区域
不要让整个 document 或 body 绑定通用 touch 处理逻辑。应将 touch 事件委托给有明确交互职责的容器，例如轮播区、抽屉菜单、滑动列表等。这些容器需设置独立的事件捕获/冒泡边界：
- 为交互容器添加 touch-action: none（水平拖拽）或 touch-action: pan-x（仅允许横向滚动），浏览器会自动抑制无关方向的默认行为和冒泡干扰
- 避免在父级（如 header、footer）监听 touchmove；若必须监听，用 e.stopPropagation() 在识别出非本区域操作后立即中断，不留给下层处理
- 使用 event.composedPath() 在 handler 中检查实际冒泡路径，确认事件是否真的来自目标子元素，防止伪点击或穿透触发
用 flag + 时间窗口过滤无效冒泡
滚动结束后紧接的 touchend 很容易误触发底层按钮——这不是 bug，而是冒泡路径未被及时“冷却”。需主动标记滚动状态并限制后续事件响应：
- 监听容器的 scroll 或全局 touchmove，设一个 isScrolling = true 标志
- 在 touchstart 中记录时间戳，在 touchend 中判断：若距离上次 scroll 或 touchmove 不足 150ms，且位移极小（e.stopImmediatePropagation()
- 注意：不用 preventDefault()，它会禁用滚动本身；只阻断冒泡，保留原生滚动能力
避免多层嵌套中重复绑定相同事件
常见误区是组件 A 监听 touchstart，其子组件 B 又监听同一事件，结果一次触摸触发两套逻辑，计算叠加、DOM 写入冲突，直接掉帧：
- 采用单一责任原则：只有最外层容器负责方向判定和位移计算，子项只响应最终指令（如 translateX）
- 若使用 OwlCarousel2 等库，禁用其内部 stage 的重复绑定，改用 onDragStart / onDragMove 回调，不额外挂 touch 事件
- 检查 DevTools → Event Listeners 面板，确认同一元素上没有多个同类型 touch 事件监听器堆积
用 passive + requestAnimationFrame 切断主线程阻塞
即使冒泡路径正确，高频 touchmove 若同步执行布局读写，仍会导致强制同步重排，卡顿明显：
- 所有 touchstart 和 touchend 监听器启用 {passive: true}（除非你确实要 preventDefault）
- touchmove 中只做轻量计算（如 delta X/Y），把样式更新、class 切换等 DOM 操作放进 requestAnimationFrame 队列
- 缓存 offsetWidth / getBoundingClientRect 等布局信息，避免在 touchmove 中反复触发回流
