本文将详细介绍在cxjs应用中如何为dom元素添加一个主动（active）的滚轮（wheel）事件监听器，并成功阻止其默认行为。针对cxJS中`onwheel`事件默认被动监听器无法调用`prEventdefault()`的问题，我们将通过`onref`属性获取元素引用，并结合`cx/util`提供的`addeventlistenerwithoptions`方法，以非被动模式注册事件，从而实现对滚轮事件的精确控制和自定义处理。
理解onWheel事件的被动性
在现代Web开发中，为了优化滚动性能，浏览器和前端框架（如react，CxJS基于React）对某些触摸和滚轮事件（例如onWheel、onTouchStart）默认采用了“被动（passive）”事件监听器。这意味着当这些事件触发时，浏览器会假定事件处理函数不会调用event.preventDefault()来阻止默认行为（如页面滚动），从而可以提前进行滚动操作，避免等待JavaScript执行完成。
虽然这种机制提升了用户体验，但当我们需要精确控制滚轮行为，例如在某个特定区域内禁用页面滚动，并实现自定义的缩放或内容滚动逻辑时，默认的被动监听器就成了一个障碍。尝试在被动监听器中调用e.preventDefault()会抛出错误，提示无法在被动事件监听器中执行此操作。
解决方案：使用onRef和addEventListenerWithOptions
为了解决onWheel事件的被动性问题，我们需要绕过React的合成事件系统，直接在DOM元素上注册一个非被动（active）的wheel事件监听器。CxJS提供了onRef属性和cx/util模块中的addEventListenerWithOptions方法，完美地支持了这一需求。
1. 获取DOM元素引用：onRef
onRef是CxJS组件（以及React）的一个特殊属性，它接受一个回调函数。当组件渲染时，该回调函数会被调用，并接收到对应的DOM元素作为第一个参数。这为我们提供了直接操作底层DOM元素的机会。
2. 添加主动事件监听器：addEventListenerWithOptions
cx/util模块提供了addEventListenerWithOptions函数。这个函数是对原生Element.prototype.addEventListener的封装，它允许我们除了指定事件类型和回调函数外，还能传递一个选项对象，其中最关键的就是passive: false，用以明确告知浏览器这是一个主动监听器，允许调用preventDefault()。
实现步骤与示例代码
下面将详细演示如何在CxJS组件中，通过onRef和addEventListenerWithOptions为div元素添加一个主动的滚轮事件监听器，并阻止其默认行为。
步骤一：引入必要工具
首先，从cx/util模块中导入addEventListenerWithOptions。
import { addEventListenerWithOptions } from 'cx/util';
步骤二：定义事件处理逻辑
在CxJS组件的类中，定义一个方法（例如addElementListener），它将作为onRef的回调函数。在这个方法中，我们将执行以下操作：
- 清理旧监听器： 使用一个变量（如unsubscribeScroll）来存储addEventListenerWithOptions返回的取消监听函数。在每次onRef回调被调用时，如果unsubscribeScroll存在，就先调用它来移除之前可能存在的监听器，防止重复注册和内存泄漏。
- 检查元素有效性： onRef回调在组件卸载时也会被调用，此时el可能为NULL。因此需要检查el是否有效。
- 注册新监听器： 调用addEventListenerWithOptions，指定事件类型为’wheel’，传入事件处理函数，并设置{ passive: false }。
// 在组件类外部或组件实例属性中声明，用于存储取消监听的函数 let unsubscribeScroll: () => void; class MyComponent extends Cx.Widget { // ...其他组件方法和配置 addElementListener(el: Element) { // 如果之前有监听器，先取消，避免重复注册和内存泄漏 if (unsubscribeScroll) { unsubscribeScroll(); unsubscribeScroll = null; // 清空引用 } // 如果元素不存在（例如组件卸载），则直接返回 if (!el) return; // 使用 addEventListenerWithOptions 添加主动的 'wheel' 事件监听器 unsubscribeScroll = addEventListenerWithOptions( el, 'wheel', (e: WheelEvent) => { e.preventDefault(); // 关键：现在可以成功阻止默认行为了 // 在这里执行你的自定义滚轮处理逻辑 console.log('滚轮事件被捕获并阻止了默认行为！DeltaY:', e.deltaY); // 例如：实现自定义的页面内容缩放或滚动 // this.store.set('scale', this.store.get('scale') + e.deltaY * 0.01); }, { passive: false } // 关键选项：设置为非被动模式 ); } // 为了确保在组件卸载时也能清理事件监听器，可以在onDestroy方法中调用 onDestroy() { if (unsubscribeScroll) { unsubscribeScroll(); unsubscribeScroll = null; } } // ...render方法等 }
步骤三：在JSX中使用onRef
将上面定义的addElementListener方法赋值给目标DOM元素的onRef属性。
<div onRef='addElementListener' style={{ height: '300px', overflow: 'auto', // 即使设置了overflow，滚轮事件也会被阻止 border: '1px solid #ccc', padding: '20px', textAlign: 'center' }}> <p>在此区域滚动鼠标滚轮，页面的默认滚动行为将被阻止。</p> <p>你可以尝试在此处滚动，并观察控制台输出。</p> <p>内容较多，以便测试滚动。</p> {[...Array(20)].map((_, i) => <p key={i}>这是第 {i + 1} 行内容。</p>)} </div>
通过以上步骤，当用户在这个div区域内滚动鼠标滚轮时，e.preventDefault()将成功阻止浏览器的默认滚动行为，而你可以完全控制滚轮事件的后续处理。
注意事项
- 内存管理： unsubscribeScroll变量的清理至关重要。确保在组件卸载时（通过onDestroy方法）以及每次onRef回调重新触发时都调用它，以避免事件监听器累积导致的内存泄漏。
- 事件类型： onWheel是React的合成事件，而我们通过addEventListenerWithOptions监听的是原生的wheel事件。虽然它们都表示滚轮事件，但在某些高级场景下，原生事件可能提供更多细节或略有不同的行为。
- 适用场景： 这种方法主要适用于那些需要完全控制滚轮行为，特别是需要阻止浏览器默认滚动行为的场景。如果你的需求仅仅是响应滚轮事件而不涉及preventDefault()，那么使用onWheel通常会更简洁。
- typescript类型： 在TypeScript环境中，事件对象e可以明确类型为WheelEvent，以获得更好的类型检查和智能提示。
总结
在CxJS应用中，当遇到onWheel事件无法阻止默认行为的问题时，推荐的解决方案是结合使用onRef属性获取DOM元素引用，并通过cx/util提供的addEventListenerWithOptions方法，以{ passive: false }选项注册一个主动的wheel事件监听器。这种方法允许开发者完全掌控滚轮事件，实现自定义的交互逻辑，同时务必注意事件监听器的清理，以维护应用的性能和稳定性。