报错根源是浏览器默认将touchmove设为passive，需显式声明{passive: false}才能调用preventDefault()；推荐优先使用touch-action CSS属性控制手势，按需在特定区域启用非被动监听。
touchmove 事件里 preventDefault() 报错：`Unable to preventDefault inside passive event listener`
这是 iOS Safari 和 Chrome for Android 最常见的报错，根源是现代浏览器默认把 touchmove 监听器设为「被动（passive）」，即禁止在其中调用 preventDefault()——除非你明确告诉它“我要主动干预”。
- 错误写法：
document.addEventListener('touchmove', e => e.preventDefault()); - 正确写法（必须加
{passive: false}）：document.addEventListener('touchmove', e => e.preventDefault(), {passive: false}); - ⚠️ 注意：
passive: false不能省略，且只对touchmove和wheel类事件生效；touchstart默认就不是 passive，无需额外配置 - 副作用：开启非 passive 后，滚动可能略卡顿（因浏览器无法提前优化滚动），所以建议**仅在真正需要拦截的区域启用**，而非全站监听
用 touch-action CSS 属性更轻量地禁用滑动
比起 JS 绑定事件，CSS 的 touch-action 是声明式、零运行时开销的方案，适合全局控制手势行为。
- 全屏禁用所有触控（含缩放、双指、横/纵滑）：
html, body { touch-action: none; } - 只禁左右滑（保留上下滚动）：
html { touch-action: pan-y; }（iOS 13+ / Android Chrome 65+ 支持） - 禁双指缩放 + 禁左右滑，但允许上下滚动：
body { touch-action: pan-y pinch-zoom; }（注意：pinch-zoom表示「允许缩放」，要禁缩放就得去掉） - ❌ 错误认知：
touch-action: none不等于“禁 touch 事件”，它只是禁浏览器默认手势，touchstart/touchmove仍会触发，只是没滚动/缩放效果了
只在特定区域禁滑动，避免影响页面整体体验
用户常犯的错误是「一棍子打死」：全页加 touchmove.preventDefault() 或 touch-action: none，结果导致轮播图不能滑、列表不能滚、甚至返回手势失效。
- ✅ 推荐做法：给需要拦截的容器加独立逻辑，例如轮播图外层：
<div id="carousel" class="no-horizontal-scroll">...</div>
document.getElementById('carousel').addEventListener('touchmove', e => { const touch = e.targetTouches[0]; const dx = Math.abs(touch.pageX - startX); const dy = Math.abs(touch.pageY - startY); if (dx > dy && dx > 10) e.preventDefault(); // 横向主导位移 > 10px 才拦截 }, {passive: false}); - ⚠️ 关键点：必须在
touchstart中记录startX/startY，否则无法判断方向；阈值10防止误触（手指微抖也会触发） - 不推荐用
event.cancelable === false判断是否可拦截——它不可靠，且不同浏览器返回不一致
别忘了 viewport meta 和缩放控制，它们和触控行为强耦合
iOS 上「左滑返回」和「双指放大」本质是浏览器级交互，单靠 JS 拦截 touch 事件治标不治本，必须配合视口策略。
立即学习“前端免费学习笔记（深入）”；
- 强制禁缩放（防双指）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- ⚠️ 注意：
user-scalable=no在 iOS 10+ 已被部分限制（Safari 可能忽略），所以务必叠加touch-action: manipulation或none才稳妥 - 如果项目需支持无障碍缩放（如老年用户），请勿粗暴禁用，改用「区域级控制」：仅对 canvas、游戏画布等非文本区域禁 touch-action
真实场景中，最易被忽略的是「被动监听器」和「touch-action 作用域层级」——前者让你的 preventDefault() 完全失效，后者让你以为禁了滑动，其实只是没生效到目标元素。动手前先用 Safari Web Inspector 的「Events」面板确认事件是否真的绑定成功，比猜强十倍。
