touch-action: pan-x 和 pan-y 必须按滑动方向精确设置，横向轮播用 pan-x、纵向列表用 pan-y；设反或混用会导致手势被忽略，触发页面整体滚动而非组件内滑动。
touch-action: pan-x 和 pan-y 必须按滑动方向精确设置
横向轮播必须用 touch-action: pan-x，纵向列表必须用 touch-action: pan-y；写反或混用（比如给轮播设 pan-y）会导致手势被浏览器忽略，用户一滑就触发页面整体滚动而非组件内滑动。
常见错误现象：轮播图手指一划就“跳回原位”，或滑动半截突然卡住——大概率是 touch-action 值与实际滑动方向不匹配。
- 只允许单向滑动的容器（如时间轴、横向 Tab）：设
touch-action: pan-x - 竖向长列表、聊天记录等：设
touch-action: pan-y - 既需横向滑动又需纵向滚动的区域（如地图容器）：显式写全
touch-action: pan-x pan-y，不能省略 - 绝对禁止在可滚动父容器上设
touch-action: none，否则子元素的pan-x会失效
为什么轮播容器加了 pan-x 还是滑不动？
不是 CSS 没生效，而是被更高优先级规则或 JS 行为覆盖了。真机调试时打开 Elements 面板，检查目标元素的 Computed 样式里 touch-action 是否真为 pan-x。
高频踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 父级 wrapper（如
.carousel-wrapper）设了touch-action: none或auto，子元素声明无效 - 监听了
touchmove但没传{ passive: false }，Chrome 会静默降级为 passive 模式，preventDefault()失效，导致默认滚动抢走手势 - 用了
transform: translateZ(0)触发硬件加速，部分旧版 Android WebView 会忽略touch-action声明 - CSS 选择器权重不够，被第三方 UI 库的
* { touch-action: auto }覆盖
滑动后首次点击失效，不是 bug 是设计副作用
当容器设了 touch-action: pan-x，浏览器为优化滑动路径，会在 touchend 后短暂进入“手势识别等待期”——此时第一次 click 被吞掉，第二次才触发。这不是延迟，是状态残留。
解决思路不是去掉 pan-x，而是补一层轻量级点击模拟：
- 监听
touchstart，记录初始坐标 - 在
touchmove中判断位移是否超过 10px，超则标记为滑动 -
touchend时若未滑动，手动调用element.click()或触发自定义事件 - 避免对
<a>直接模拟跳转，改用window.location.href或router.push()，防止 SEO 影响
DOM 深度和触摸目标尺寸直接影响 touchstart 响应耗时
即使 touch-action 设置正确，如果元素嵌套过深或太小，系统从触点采集到事件派发的链路仍会变长。实测显示 DOM 深度 > 6 层时，touchstart 平均延迟翻倍。
关键硬指标必须达标：
- 触摸目标最小物理尺寸：客户端计算的
clientWidth × clientHeight ≥ 48 × 48px（iOS/Android 通用下限） - 轮播项、Tab 标签、指示点等高频操作区，建议设为
min-width: 48px; min-height: 48px - 避免用
padding或border“撑开”尺寸，必须是内容区真实宽高 - 轮播外层容器 DOM 深度控制在 3 层以内（例：
<div class="carousel"><div class="track"><div class="slide">）
复杂点在于：这些限制不是独立生效的。一个 pan-x 容器若同时 DOM 过深 + 尺寸不足 + 父级有 touch-action: none，问题会叠加放大，且真机上比模拟器更明显。
