HTML中如何实现被动事件监听passive选项-html教程-PHP中文网

passive事件监听器是浏览器优化滚动性能的机制，通过{passive: true}告知浏览器监听器不会调用preventdefault()，从而允许默认滚动行为立即执行而不等待监听器完成，显著提升移动端touchstart、touchmove、wheel等事件的响应流畅度。

html中如何实现被动事件监听passive选项

什么是 passive 事件监听，为什么必须加

在移动端或支持触摸的设备上，touchstart、touchmove、wheel 这类事件默认会阻塞滚动，浏览器得等监听器执行完才能决定是否滚动——哪怕你什么都没做，也会导致卡顿。加 { passive: true } 就是告诉浏览器：“这个监听器绝不会调用 preventDefault()，你不用等我，直接滚动就行”。Chrome 56+ 开始对未声明 passive 的这些事件自动降级为 passive，并抛出警告：Unable to preventDefault inside passive event listener。

addEventListener 中怎么正确传 passive 选项

必须作为第三个参数传入一个对象，不能写成布尔值，也不能漏掉其他选项（比如 capture）：

// ✅ 正确：显式声明 passive
element.addEventListener('touchmove', handler, { passive: true });

// ❌ 错误：传 true 是 legacy useCapture 参数，不是 passive
element.addEventListener('touchmove', handler, true);

// ❌ 错误：passive 和 capture 冲突时需显式控制
element.addEventListener('touchmove', handler, { passive: true, capture: true }); // 可以，但注意捕获阶段无法 preventDefault

如果监听器里确实要调用 preventDefault()（比如自定义下拉刷新），必须设 passive: false，且确保浏览器支持（iOS Safari 12.2+ 才支持 passive: false）
Vue 3 的 v-on:touchmove.passive、React 的 onTouchMove 默认不带 passive，需手动绑定原生事件
不要在全局 document 上对 touchmove 盲目加 passive: true，可能破坏需要拦截的交互逻辑（如手势识别库）

如何检测浏览器是否支持 passive 选项

不能靠 UA 判断，得实测。常见做法是用一个空对象做特性检测：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

let supportsPassive = false;
try {
  const opts = Object.defineProperty({}, 'passive', {
    get() { supportsPassive = true; }
  });
  window.addEventListener('test', null, opts);
} catch (e) {}

检测结果为 false 时，fallback 方案只能是不传第三个参数（老行为），或改用 touchstart + preventDefault() 控制（但会失去流畅滚动）
Webpack/Babel 不会自动 polyfill passive，需自行处理兼容逻辑
Firefox 49+、Chrome 51+、Safari 15.4+ 支持；Android WebView 58+ 支持；旧版 iOS Safari（passive: true，设 false 会被忽略