正确设置 touch-action 可提升滑动手感，但值选错或加错元素会导致卡顿、点击失效；需加在实际滚动元素上，配合 passive: false 和 preventdefault() 才能完全接管手势。
直接设 touch-action: pan-x 或 touch-action: pan-y 就能显著改善滑动手感，但写错值或加在错误元素上反而会让滑动卡死、点击失效。
touch-action 值选错，滑动就变“顿挫”
浏览器对 touch-action 的解析不是“允许/禁止”二值判断，而是手势意图协商机制。写错值会破坏这个协商：
-
touch-action: none加在可滚动容器上 → 原生滚动惯性消失，手指一松就停，iOS 上甚至无法触发scroll事件 -
touch-action: pan-x pan-y看似“全放开”，实则比默认行为更严——浏览器要求初始位移方向更明确（通常 > 3px），斜向轻滑可能被忽略 -
touch-action: manipulation用在轮播图容器里 → 禁止了横向拖拽，轮播切不动，但用户又没意识到是 CSS 搞的鬼
必须加在监听 touchmove 的元素本身
父容器设了 touch-action: pan-x，子元素仍可能被原生滚动劫持——因为事件捕获阶段浏览器只看当前目标元素的样式计算结果：
- 轮播图要横滑？给
.carousel-track（实际滚动的 inner 容器）设touch-action: pan-x，不是给外层.carousel - 表格区域要支持横向滚动？给
.table-wrapper（带overflow-x: auto的容器）设touch-action: pan-x，别加在body或html - fixed 导航栏下方列表点不动？检查是否误把
touch-action: none写在了position: fixed元素上，Android Chrome 90–105 会因此丢事件
配合 passive: false 才能真正接管 touchmove
设了 touch-action: pan-x 只是“申请权限”，真要阻止原生滚动还得靠 JS：在 touchmove 里调 preventDefault()，但这需要显式声明 { passive: false }，否则 Chrome 会静默忽略：
- 漏传
{ passive: false }→preventDefault()不生效 → 手指划动时页面仍会跟着滚，尤其在安卓低端机上明显 - 在
touchstart阶段就预判方向：记录startX/startY，touchmove开头立刻比Math.abs(dx) > Math.abs(dy)，只在确认是横向意图时才preventDefault()，避免“先跳一下再接管”的撕裂感 - 如果容器本身
overflow: hidden，touch-action: pan-x实际无效，浏览器 fallback 到默认行为，此时加passive: false也没意义
滑动后首次点击失效，不是 bug 是协商残留
设了 touch-action: pan-y 的区域，在用户完成一次竖向滑动后，首次点击常无响应——这是浏览器在手势状态机里还留着“刚结束滑动”的上下文，没及时切回点击模式：
- 别用
click监听，改用pointerdown：它不依赖这个状态机，且兼容键盘（Space/Enter）和屏幕阅读器 - 若必须用
touchstart+touchend模拟点击，加个isswiping标志位：在touchmove中设为true，touchend时若为false才触发逻辑，避免误判 - 真机测试时，两指快速滑动该区域，看是否透传到底部页面——透传说明
touch-action没生效，或者被中间某层pointer-events: none截断了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
