如何禁用/解绑插件绑定的JavaScript wheel事件

以下方法均为浏览器端可直接实现的方案，可根据实际场景选择：

• 方法1：调用原生API规范移除已绑定监听器
  如果你能拿到插件绑定事件时传入的回调引用、事件配置参数，直接调用removeEventListener是副作用最小的标准方案：

  // 示例：target为插件绑定事件的DOM元素，pluginWheelHandler为插件的滚动处理回调，config为绑定时传入的配置（如capture、passive等）
  target.removeEventListener('wheel', pluginWheelHandler, config)
  

  如果拿不到回调引用，可以在Chrome开发者工具控制台执行getEventListeners(target)，直接获取该元素上所有已绑定的wheel事件监听器的回调引用、配置参数，逐个执行移除即可，返回结果和你截图中事件调试面板展示的内容完全一致。
• 方法2：插件初始化前拦截事件绑定
  如果插件会在初始化时自动绑定wheel事件，可以在插件代码加载、初始化逻辑执行前，提前重写目标元素的addEventListener方法，从根源拦截wheel事件的注册：

  // 提前获取插件挂载的滚动容器元素
  const pluginContainer = document.querySelector('.your-plugin-scroll-node')
  const originalAddEvent = pluginContainer.addEventListener.bind(pluginContainer)
  pluginContainer.addEventListener = function(eventType, handler, options) {
    // 直接拦截wheel类型的事件绑定
    if (eventType === 'wheel') return
    return originalAddEvent(eventType, handler, options)
  }
  // 上述逻辑执行完后再初始化插件，插件就无法成功绑定wheel事件
  

• 方法3：捕获阶段拦截事件阻止插件逻辑执行
  如果无法调整插件初始化顺序、也拿不到已绑定的监听器引用，可以注册一个捕获阶段触发的wheel事件监听器，阻止后续插件的监听器执行：

  // 第三个参数传true代表在捕获阶段触发，执行优先级高于目标节点、冒泡阶段绑定的监听器
  window.addEventListener('wheel', function(e) {
    // 可根据需求加判断条件，只拦截插件容器内的滚动事件，避免影响全局滚动
    // if (!e.target.closest('.your-plugin-scroll-node')) return
    e.stopImmediatePropagation()
  }, true)
  

• 方法4：克隆节点替换清空所有绑定事件
  如果插件仅在固定容器上绑定事件，可以通过深克隆节点替换的方式快速清空所有已绑定的监听器：

  const oldNode = document.querySelector('.your-plugin-scroll-node')
  // 传true代表深克隆所有子节点，仅复制DOM结构与属性，不会复制原有事件监听器
  const newNode = oldNode.cloneNode(true)
  oldNode.parentNode.replaceChild(newNode, oldNode)
  

  注意该方法会清空容器上所有绑定的事件，替换后需要重新给新节点绑定所需的交互逻辑，避免其他功能失效。

注意：如果插件绑定wheel事件时开启了capture: true配置，你注册的拦截监听器必须早于插件的监听器执行注册，否则无法成功拦截。

内容的提问来源于stack exchange，提问作者Christian Holm