横向滚动列表点击失效的根源是浏览器手势识别等待期，需分层拦截：设4px位移阈值判定滑动、scroll/scrollend控制pointer-events、click前用getBoundingClientRect校验可视性、改用touchend替代click绕过300ms延迟。
scrollLeft + pointer-events 配合判定点击是否有效
横向滚动列表里，用户手指一划就滑动、一点就跳转，但系统默认会把短按也识别为“滑动开始”，导致点击失效。根本原因不是事件没触发，而是 touchstart 后浏览器进入手势识别等待期，touchend 前无法确定是点击还是拖拽。
实操上最稳的解法是：先禁用子项的点击响应，等滑动确认结束再恢复。关键靠两个信号：
- 监听容器的
scroll事件，一旦触发，说明发生了真实滚动 → 立即给所有子项加pointer-events: none - 监听
scrollend（Chrome 120+ / Safari 16.4+ 支持），或 fallback 到setTimeout延迟 250ms → 清除pointer-events: none - 子项绑定
click而非tap，避免移动端 polyfill 干扰原生判定
用 getBoundingClientRect 判断点击是否落在可视区域内
横向滚动时，用户可能点中一个被部分遮挡、甚至完全移出视口的 item，但 DOM 还在，click 仍会触发。这会造成误操作 —— 比如点了个看不见的标签，却跳转到错误页面。
必须在点击回调里加一层可见性校验：
立即学习“前端免费学习笔记（深入）”；
- 调用
element.getBoundingClientRect()获取该 item 相对于视口的位置 - 检查
rect.left 0（即：右边缘在容器右边界内，左边缘在容器左边界右） - 不要只看
rect.top和rect.bottom，横向滚动下垂直位置基本不变，无效 - 若不可见，直接
return，不执行跳转或状态变更
touchmove 中位移阈值设为 4px 最平衡
很多项目自己实现滑动手势，用 touchstart → touchmove → touchend 流程。但阈值设太高（如 10px），轻微抖动就变滑动；设太低（如 1px），手指刚落稳就触发点击，滑动跟手性差。
经过真机实测（iOS 17+/Android 14+ 主流机型），4px 是临界点：
- 小于 4px 的位移视为点击预备态，不阻止默认行为，保留
click可能性 - 大于等于 4px 立即
event.preventDefault()，并标记该次触摸为“滑动中” - 记录起始
clientX，后续touchmove中用Math.abs(currentX - startX)实时比对 - 别用
pageX或screenX，受缩放和滚动影响大，容易误判
移动端 click 300ms 延迟会导致滑动后点击延迟响应
即使你做了上面所有防冲突处理，iOS Safari 下仍可能出现：快速滑动停止后，立刻点一个 item，要等约 300ms 才触发 click。这不是 bug，是浏览器为双击缩放留的判定窗口。
绕过它的唯一可靠方式是放弃 click，改用 touchend + preventDefault：
- 给子项绑定
touchend，并在 handler 开头加event.preventDefault() - 内部仍做和
click一样的逻辑（如location.href或router.push） - 必须同时监听
touchcancel，防止手势中途取消时误触发 - 注意：这样会失去 :active 伪类效果，需用 JS 切换 class 模拟按下态
横向滚动列表的冲突本质是「同一触摸序列承载两种意图」，没有银弹，只有分层拦截：滑动判定靠位移阈值，点击生效靠可视性校验，最终响应靠事件类型切换。漏掉任何一层，都可能在某个机型上复现“点不动”或“乱滑动”。
