使用 CxJS 为 onWheel 事件添加主动监听器_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 CxJS 为 onWheel 事件添加主动监听器

2025-11-01

浏览次数：次

返回列表

使用 cxjs 为 onwheel 事件添加主动监听器

本文介绍了在 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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1070">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680049013074.png" alt="Mureka">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1070">Mureka</a>
                            <p>Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Mureka">
                                <span>1091</span>
                            </div>
                        </div>
                        <a href="/ai/1070" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Mureka">
                        </a>
                    </div>
                
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                </div>
            </cx>
        );
    }
}

注意事项：

使用主动监听器可能会影响页面性能，因为浏览器必须等待监听器执行完毕才能继续处理滚动。因此，只有在真正需要阻止默认滚动行为时才应使用主动监听器。
确保在组件卸载时移除事件监听器，以避免内存泄漏。可以使用 onComponentWillUnmount 生命周期方法来移除监听器。

总结：

通过使用 onRef 属性和 addEventListenerWithOptions 方法，你可以轻松地在 CxJS 中为 onWheel 事件添加主动监听器，并阻止默认的滚动行为。请记住，只有在真正需要阻止滚动时才应使用主动监听器，并确保在组件卸载时移除监听器。这个方法同样适用于其他需要主动监听器的事件类型。

以上就是使用 CxJS 为 onWheel 事件添加主动监听器的详细内容，更多请关注其它相关文章！

# 将在 # 滨海新区关键词排名咨询 # 早教推广营销策略分析报告 # 网站运营倾向seo # 镇江营销策划推广招聘网 # 峰少seo博客 # 北京视频网站优化哪家好 # seo网站优化运营面试 # 南昌自媒体网站建设 # 牡丹江电商网站优化排名 # 洛阳网站品牌推广 # 如何使用 # 绑定 # 时才 # 表单 # react # 移除 # 方法来 # 你可以 # 回调 # 将被 # red # overflow # 组件渲染 # 工具 # 回调函数 # 浏览器 # js # html

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：解决MQTT.js在浏览器中n.createConnection错误的指南

下一篇：CxJS中实现非被动式滚轮事件监听与默认行为阻止的教程

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 CxJS 为 onWheel 事件添加主动监听器