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

<div onRef='addElementListener'>
  {/* 此div内的内容 */}
</div>

import { addEventListenerWithOptions } from 'cx/util';

// 假设这是您的CxJS组件类内部
class MyComponent extends Widget {
    // 用于存储取消订阅函数的变量，以便在组件更新或卸载时清理旧的监听器
    unsubscribeScroll: () => void; 

    /**
     * onRef回调函数，当目标DOM元素可用时被调用。
     * @param {Element} el - 目标DOM元素。
     */
    addElementListener(el: Element) {
        // 在添加新的监听器之前，如果存在旧的监听器，先将其移除。
        // 这对于处理组件更新或重新渲染的情况至关重要，防止重复添加和内存泄漏。
        if (this.unsubscribeScroll) {
            this.unsubscribeScroll();
        }

        // 如果元素不存在（例如，组件正在卸载），则直接返回
        if (!el) {
            return;
        }

        // 使用addEventListenerWithOptions添加非被动式滚轮事件监听器
        this.unsubscribeScroll = addEventListenerWithOptions(
            el,             // 第一个参数：目标DOM元素
            'wheel',        // 第二个参数：事件类型，注意是原生DOM事件名称 'wheel'
            (e: WheelEvent) => { // 第三个参数：事件处理函数
                e.preventDefault(); // 在这里，preventDefault()将正常工作，阻止默认滚动
                // 在此处添加您的自定义滚轮逻辑，例如：
                // console.log('滚轮事件触发，阻止了默认滚动。DeltaY:', e.deltaY);
                // 根据e.deltaY的值实现自定义缩放、滚动或其他交互
            },
            { passive: false } // 第四个参数：事件选项，关键是设置 passive: false
        );
    }

    /**
     * 组件生命周期方法：在组件即将被销毁时调用。
     * 确保在此处移除事件监听器，以防止内存泄漏。
     */
    onDestroy() {
        if (this.unsubscribeScroll) {
            this.unsubscribeScroll();
        }
    }
}

import { Widget, VDOM } from 'cx/ui';
import { addEventListenerWithOptions } from 'cx/util';

// 定义一个CxJS组件，用于演示非被动式滚轮事件
class CustomScrollDiv extends Widget {
    // 用于存储取消订阅函数的变量
    unsubscribeScroll: () => void; 

    /**
     * onRef回调函数，当目标DOM元素可用时被调用。
     * @param {Element} el - 目标DOM元素。
     */
    addElementListener(el: Element) {
        // 清理旧的监听器，防止重复添加和内存泄漏
        if (this.unsubscribeScroll) {
            this.unsubscribeScroll();
        }

        // 如果元素不存在（例如，组件正在卸载），则直接返回
        if (!el) {
            return;
        }

        // 添加非被动式滚轮事件监听器
        this.unsubscribeScroll = addEventListenerWithOptions(
            el,
            'wheel',
            (e: WheelEvent) => {
                e.preventDefault(); // 阻止默认的页面滚动行为
                console.log('自定义滚轮事件触发，阻止了默认滚动。DeltaY:', e.deltaY);
                // 在这里添加您的自定义逻辑，例如：
                // if (e.deltaY < 0) {
                //     // 向上滚动逻辑
                // } else {
                //     // 向下滚动逻辑
                // }
            },
            { passive: false } // 关键选项：将事件设置为非被动式
        );
    }

    /**
     * 组件生命周期方法：在组件即将被销毁时调用。
     * 确保在此处移除事件监听器，以防止内存泄漏。
     */
    onDestroy() {
        if (this.unsubscribeScroll) {
            this.unsubscribeScroll();
        }
    }

    render() {
        // 渲染一个带有onRef属性的div
        return (
            <div
                onRef='addElementListener' // 将addElementListener方法绑定到div的onRef属性
                style={{
                    width: '300px',
                    height: '200px',
                    border: '2px solid #4CAF50',
                    overflow: 'auto', // 确保该div本身有滚动条以观察效果
                    padding: '20px',
                    backgroundColor: '#e8f5e9',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}
            >
                <p>请在此绿色边框区域内滚动鼠标滚轮。您会发现页面的默认滚动行为被阻止，同时控制台会输出滚轮事件信息。</p>
                <p>内容1</p><p>内容2</p><p>内容3</p><p>内容4</p><p>内容5</p>
                <p>内容6</p><p>内容7</p><p>内容8</p><p>内容9</p><p>内容10</p>
                <p>内容11</p><p>内容12</p><p>内容13</p><p>内容14</p><p>内容15</p>
            </div>
        );
    }
}

// 您可以在您的CxJS应用中像这样使用这个组件：
// <CustomScrollDiv />