如何在CxJS中为onWheel事件添加主动事件监听器？

首先纠正你代码里的拼写错误：e.prevetDefault() 应该改为 e.preventDefault()，这个错误会导致即使监听器设置正确，也无法正常阻止默认行为。

接下来解决被动监听器的问题：内联事件绑定（比如<div onWheel="onWheelAction">）默认会被浏览器当作被动事件监听器，这类监听器里调用preventDefault()就会抛出你遇到的错误。要转为主动监听器，需要用addEventListener显式声明passive: false，具体实现分两种场景：

原生JavaScript实现 #

1. 先给目标div添加标识（比如id）：

<div id="wheelTarget">
   ...
</div>

2. 在JavaScript中绑定事件监听器，明确设置passive: false：

const wheelTarget = document.getElementById('wheelTarget');
function onWheelAction(e) {
  e.preventDefault();
  // 你的其他逻辑，若需使用store可在此处引入或传递
  ...
}
wheelTarget.addEventListener('wheel', onWheelAction, { passive: false });

若使用Vue框架（从代码中的{store}推测可能为Vue场景） #

可以通过两种方式实现：

方式1：使用Vue事件修饰符关闭被动模式 #

Vue支持通过.passive.false修饰符强制设置监听器为主动模式：

<div @wheel.passive.false="onWheelAction">
   ...
</div>

对应方法修正拼写后保持原有逻辑：

methods: {
  onWheelAction(e, {store}) {
    e.preventDefault();
    ...
  }
}

方式2：在组件生命周期中手动绑定 #

如果修饰符方式不生效，可在组件挂载后用原生API绑定，同时注意卸载时清理监听器避免内存泄漏：

mounted() {
  this.$el.addEventListener('wheel', this.onWheelAction, { passive: false });
},
beforeUnmount() {
  this.$el.removeEventListener('wheel', this.onWheelAction);
},
methods: {
  onWheelAction(e) {
    e.preventDefault();
    const { store } = this; // 从组件实例直接获取store
    ...
  }
}

核心逻辑是：通过addEventListener并设置{ passive: false }，告知浏览器该监听器可能会阻止默认行为，不要以被动模式进行优化。

内容的提问来源于stack exchange，提问作者Stefan Dragicevic