本文介绍了在 CxJS 中为 `onWheel` 事件添加主动监听器的方法，以解决默认情况下 `onWheel` 为被动监听器导致无法调用 `preventDefault` 的问题。通过使用 `onRef` 属性获取元素引用，并结合 CxJS 提供的 `addEventListenerWithOptions` 方法，可以轻松实现主动监听，从而控制滚动行为。
在 React (CxJS 基于 React) 中，onWheel 事件默认是被动监听器（passive event listener）。这意味着浏览器可以在不阻塞主线程的情况下处理滚动事件，从而提高页面性能。然而，被动监听器不允许调用 preventDefault() 方法来阻止默认的滚动行为。如果你需要在 onWheel 事件中阻止滚动，就需要使用主动监听器。
CxJS 提供了一种方便的方法来解决这个问题，即使用 onRef 属性和 addEventListenerWithOptions 方法。
步骤 1: 使用 onRef 获取元素引用
onRef 属性允许你获取组件渲染的底层 DOM 元素的引用。你可以将一个回调函数赋值给 onRef 属性，该回调函数将在元素挂载后被调用，并将元素作为参数传递。
<div onRef={el => this.element = el}>
...
</div>在上面的代码中，this.element 将在 div 元素挂载后被设置为该元素的引用。
步骤 2: 使用 addEventListenerWithOptions 添加主动监听器
CxJS 提供了一个名为 addEventListenerWithOptions 的工具函数，它可以让你添加具有特定选项的事件监听器。这包括设置监听器为主动监听器。
首先，你需要从 cx/util 导入 addEventListenerWithOptions。
import { addEventListenerWithOptions } from 'cx/util';然后，你可以使用以下代码添加一个主动的 wheel 事件监听器：
import { addEventListenerWithOptions } from 'cx/util';
let unsubscribeScroll: () => void;
addElementListener(el: Element) {
if (unsubscribeScroll) unsubscribeScroll();
if (!el) return;
unsubscribeScroll = addEventListenerWithOptions(
el,
'wheel',
(e: any) => {
e.preventDefault();
// 在此处添加你的滚动处理逻辑
},
{ passive: false }
);
}<div onRef='addElementListener'> ... </div>
代码解释：
- addEventListenerWithOptions(el, 'wheel', callback, options): 这个函数接受四个参数：
- el: 要添加监听器的 DOM 元素。
- 'wheel': 要监听的事件类型。
- callback: 事件触发时要执行的回调函数。
- options: 一个包含配置选项的对象。 在这里，我们设置 passive: false 来创建一个主动监听器。
- e.preventDefault(): 阻止默认的滚动行为。 这只有在主动监听器中才有效。
- unsubscribeScroll: 用于存储取消订阅的函数，以便在元素卸载或重新渲染时清除之前的监听器。
完整示例：
import { Widget, HtmlElement } from 'cx/ui';
import { addEventListenerWithOptions } from 'cx/util';
class MyComponent extends Widget {
declareData() {
super.declareData(...arguments);
this.declareData({
element: null
})
}
addElementListener(el: Element) {
if (this.unsubscribeScroll) this.unsubscribeScroll();
if (!el) return;
this.unsubscribeScroll = addEventListenerWithOptions(
el,
'wheel',
(e: any) => {
e.preventDefault();
console.log('滚动事件触发，阻止默认行为');
},
{ passive: false }
);
}
onComponentWillUnmount() {
super.onComponentWillUnmount();
if (this.unsubscribeScroll) {
this.unsubscribeScroll();
this.unsubscribeScroll = null;
}
}
render() {
return (
<cx>
<div onRef={el => this.addElementListener(el)} style="height: 200px; overflow: auto;">
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
<p>尝试滚动我，默认行为将被阻止。</p>
</div>
</cx>
);
}
}注意事项：
- 使用主动监听器可能会影响页面性能，因为浏览器必须等待监听器执行完毕才能继续处理滚动。 因此，只有在真正需要阻止默认滚动行为时才应使用主动监听器。
- 确保在组件卸载时移除事件监听器，以避免内存泄漏。 可以使用 onComponentWillUnmount 生命周期方法来移除监听器。
总结：
通过使用 onRef 属性和 addEventListenerWithOptions 方法，你可以轻松地在 CxJS 中为 onWheel 事件添加主动监听器，并阻止默认的滚动行为。 请记住，只有在真正需要阻止滚动时才应使用主动监听器，并确保在组件卸载时移除监听器。 这个方法同样适用于其他需要主动监听器的事件类型。
