javascript - 如何在 CxJS 中为 onWheel 事件添加事件事件监听器？

Question

我有一个 div，我想在其上添加 onWheel 事件监听器并阻止默认行为。

onWheelAction(e, {store}) {
   e.prevetDefault();
   ...
}

<div onWheel="onWheelAction">
   ...
</div>

这会引发一个错误，表明无法在被动事件监听器中执行 preventDefault 操作。如何将其转换为事件监听器？

Answer 1

onWheel 是 React ( here ) 的被动事件监听器，Cx 不会覆盖它。

要实现此功能，您可以使用 onRef 属性代替 onWheel，该属性接受回调，第一个参数是元素。然后，您可以使用 Cx 中提供的 addEventListenerWithOptions 方法在该元素上添加事件监听器，并防止默认行为。

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>