touch-action设为none后手势无反应，是因为浏览器默认不派发pointermove事件，需在pointerdown中调用event.preventDefault()并配合{passive: false}绑定事件，否则事件延迟或丢失。
touch-action设成none后手势没反应，为什么？
这不是CSS写错了，而是浏览器在touch-action: none下默认不派发pointermove事件，除非你明确告诉它“我要接管”。尤其在Android Chrome 115之前版本，pointerdown阶段不调用event.preventDefault()，后续pointermove就会延迟甚至丢失。
正确做法是：pointerdown回调里立刻加event.preventDefault()；如果只用touchstart/touchmove，也得在touchstart里调一次——但注意别无脑调，否则正常滚动就废了。
- 必须配合
{ passive: false }绑定事件，否则Chrome会警告并忽略preventDefault() - 加
user-select: none防文字误选，-webkit-user-drag: none防图片拖拽干扰 - iOS Safari 13.4+才完整支持
pan-x/pan-y，旧版需fallback到preventDefault()逻辑判断
轮播图容器该用pan-x还是none？
用touch-action: pan-x。设none会让整个区域失去原生水平滚动能力，用户无法靠惯性滑动、回弹、吸附，JS还得自己实现物理动画，成本高且体验难对齐系统。
pan-x让浏览器提前启用合成层优化，滚动更顺；同时禁掉垂直滑动和缩放，避免手指偏移时触发页面滚动或双指误操作。
立即学习“前端免费学习笔记（深入）”；
- 不要在
overflow: auto的列表容器上设none，否则无法滚动 - 若轮播图支持双指缩放预览图，改用
touch-action: pan-x pinch-zoom，但要显式写出pan-x，不能只写pinch-zoom（后者会禁掉所有平移） -
manipulation等价于pan-x pan-y pinch-zoom，适合卡片类点击+滚动场景，但不适用于纯横向交互
按钮上加touch-action: none会出什么问题？
直接导致click事件失效。因为none禁用了所有默认行为，包括tap识别和click触发链（touchstart → touchend → click），浏览器不会自动补click。
按钮类元素该用touch-action: manipulation：它保留单指tap触发click，禁掉双击放大和缩放，还能消除300ms延迟，是移动端按钮最稳妥的值。
- 绝对不要给
<button></button>或带onclick的<div>设<code>none - 如果按钮需要自定义长按逻辑，用
touch-action: manipulation+ 监听touchstart并计时，别动none -
auto在按钮上行为不可控，某些安卓WebView会误判为可滚动区域 - 务必加
user-select: none和-webkit-user-drag: none，不然iOS Safari可能选中文本框或拖走图片 - 监听
pointerdown而非touchstart更稳妥，兼容触控笔和触摸板 - 别在
body或html上全局设none，否则整个页面无法滚动，修复成本极高
Canvas画布为什么必须加touch-action: none？
因为Canvas本身不触发任何默认手势，但父容器可能有overflow: scroll或body默认滚动，手指一划，页面就滚走，画线/拖拽直接中断。只有none能彻底切断浏览器对这个区域的所有手势干预。
但加了none不代表完事——你得自己处理全部pointer事件，包括防止误触导致文字选择、图片拖拽，还要注意多点触控时touches和changedTouches的区别。
passive: false和preventDefault()的配对时机。很多问题不是touch-action本身没生效，而是事件监听器没声明可取消，或者preventDefault()调太早或太晚。这层细节不厘清，CSS再怎么调都没用。
