如何在React中设置passive:false的事件监听器？

React 默认会给 wheel 事件设置 passive: true，目的是提升滚动性能，但这会导致你无法调用 event.preventDefault() 来阻止默认滚动行为，刚好踩中你这个缩放需求的痛点。你提到的直接用 ref + useEffect 确实有隐患——因为 ref.current 的变化不会触发 useEffect 重新执行，当元素更新或替换时，旧的事件监听会留在已卸载的元素上，新元素却没绑定，直接导致功能失效。

下面是两种安全且符合React规范的实现方式：

方法1：使用回调Ref（Callback Ref）处理监听绑定/解绑 #

回调Ref会在元素挂载、更新、卸载时自动触发，完美解决动态元素的监听同步问题。我们可以结合一个普通Ref保存当前元素，确保每次元素变化时先移除旧监听，再绑定新监听：

import { useRef, useCallback } from 'react';

function ZoomableElement() {
  // 保存当前元素的引用，用于移除旧监听
  const currentElement = useRef(null);

  // 滚轮事件处理函数，用useCallback缓存避免不必要的重新创建
  const handleWheel = useCallback((e) => {
    e.preventDefault();
    // 这里写你的缩放逻辑，比如根据滚轮方向调整缩放比例
    const currentScale = parseFloat(currentElement.current.style.scale) || 1;
    const newScale = e.deltaY > 0 ? currentScale - 0.1 : currentScale + 0.1;
    currentElement.current.style.scale = Math.max(0.5, Math.min(2, newScale)); // 限制缩放范围
  }, []);

  // 回调Ref：处理元素的监听绑定与解绑
  const wheelRef = useCallback((element) => {
    // 先移除旧元素的监听（如果存在）
    if (currentElement.current) {
      currentElement.current.removeEventListener('wheel', handleWheel);
    }

    // 更新当前元素的引用
    currentElement.current = element;

    // 给新元素添加监听，必须显式设置passive: false才能调用preventDefault
    if (element) {
      element.addEventListener('wheel', handleWheel, { passive: false });
    }
  }, [handleWheel]);

  return (
    <div 
      ref={wheelRef}
      style={{ width: '400px', height: '400px', background: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
    >
      滚动鼠标滚轮缩放此区域
    </div>
  );
}

方法2：用State跟踪元素引用，配合useEffect监听 #

如果你更习惯用useEffect的写法，可以通过useState来跟踪元素的变化——因为State更新会触发useEffect重新执行，从而同步监听状态：

import { useState, useEffect, useCallback } from 'react';

function ZoomableElement() {
  // 用State保存元素引用，元素变化时会触发状态更新
  const [targetElement, setTargetElement] = useState(null);

  const handleWheel = useCallback((e) => {
    e.preventDefault();
    if (!targetElement) return;
    const currentScale = parseFloat(targetElement.style.scale) || 1;
    const newScale = e.deltaY > 0 ? currentScale - 0.1 : currentScale + 0.1;
    targetElement.style.scale = Math.max(0.5, Math.min(2, newScale));
  }, [targetElement]);

  useEffect(() => {
    if (!targetElement) return;

    // 绑定监听，指定passive: false
    targetElement.addEventListener('wheel', handleWheel, { passive: false });

    // 清理函数：组件卸载或元素更新时移除监听
    return () => {
      targetElement.removeEventListener('wheel', handleWheel);
    };
  }, [targetElement, handleWheel]);

  return (
    <div 
      ref={setTargetElement}
      style={{ width: '400px', height: '400px', background: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
    >
      滚动鼠标滚轮缩放此区域
    </div>
  );
}

关键注意点 #

• 必须显式设置 { passive: false }：这是让 preventDefault() 生效的核心，告诉浏览器这个事件处理函数可能会阻止默认行为，不要优化为被动监听。
• 一定要清理事件监听：不管用哪种方法，都要在元素卸载或更新时移除旧监听，避免内存泄漏和无效监听残留。

内容的提问来源于stack exchange，提问作者callum