chrome中touch事件preventdefault警告的解决核心是显式声明passive状态：需在addeventlistener第三个参数设passive: false；或用css touch-action替代js阻止；按需启用，避免一刀切。
chrome 浏览器在 touchstart 或 touchmove 事件中调用 e.preventdefault() 时，若未显式声明事件监听器的 passive 状态，就会触发控制台警告：unable to preventdefault inside passive event listener。这并非错误，而是浏览器为保障滚动流畅性所做的强制优化。解决核心在于让浏览器“提前知道”你是否需要阻止默认行为。
明确设置 passive: false
这是最直接、兼容性好且语义清晰的修复方式。当你的逻辑确实需要拦截触摸滚动（比如自定义滑动、拖拽、手势识别），必须在添加监听器时主动声明 passive: false：
- window.addEventListener('touchmove', handler, { passive: false });
- document.addEventListener('touchstart', handler, { passive: false });
- element.addEventListener('touchmove', handler, { passive: false });（注意：从 Chrome 56 起仅 window/document/body 默认 passive；其他元素需自行判断是否需要设为 false）
⚠️ 注意：不能只写 { passive: false } 却漏掉第三个参数位置；也不能在已注册的监听器里动态修改 passive 属性——它是一次性绑定的配置。
用 CSS 的 touch-action 替代 JS 阻止
如果你的目标是**完全禁用某区域的原生滚动或缩放行为**（例如轮播图容器、画布区域、弹窗遮罩），推荐优先使用 CSS 属性 touch-action。它比 JS 更高效，且不会触发警告：
- touch-action: none; —— 禁用所有触摸行为（滚动、缩放、双击放大）
- touch-action: pan-y; —— 允许垂直滚动，但禁止水平拖动和缩放
- touch-action: manipulation; —— 允许滚动和双击缩放，禁用非必要手势（如 pinch-zoom）
✅ 优势：无需 JS 监听，无性能损耗，不干扰事件流，且自动适配 passive 行为。适用于大多数 UI 组件场景。
按需启用 passive，避免一刀切
不是所有 touch 事件都需要 passive: false。盲目设为 false 会牺牲滚动性能。应结合业务逻辑判断：
- 仅在用户开始拖拽（如
touchstart中记录起始位置）后，才对后续touchmove启用passive: false - 用
touch-action控制区域行为，JS 只负责手势识别与状态更新，不干预默认滚动 - 对纯监听类操作（如统计触点坐标、埋点），保持默认 passive: true 即可，此时
preventDefault()本就不该调用
这样既消除了警告，又保留了原生滚动的顺滑体验。
