本文介绍了在 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 事件添加主动监听器，并阻止默认的滚动行为。 请记住，只有在真正需要阻止滚动时才应使用主动监听器，并确保在组件卸载时移除监听器。 这个方法同样适用于其他需要主动监听器的事件类型。