React中onWheel事件条件阻止默认滚动遇preventDefault报错的解决方法

安全阿岳

2026-7-11

React中解决onWheel事件preventDefault报错的方案

React默认会给onWheel这类滚动相关事件设置passive: true，导致在事件回调里调用preventDefault()时抛出Unable to preventDefault inside passive event listener invocation错误。要解决这个问题，需要手动添加事件监听器并显式设置passive: false，具体实现分两种场景：

函数组件方案

使用useRef获取DOM元素，配合useEffect手动绑定/解绑事件：

import { useEffect, useRef } from 'react';

function YourComponent() {
  const targetDiv = useRef(null);

  const handleWheel = (e) => {
    if (e.ctrlKey) {
      console.log("wheel is called, then want to stop scroll!!");
      e.preventDefault();
      e.stopPropagation();
    }
  };

  useEffect(() => {
    const element = targetDiv.current;
    if (element) {
      element.addEventListener('wheel', handleWheel, { passive: false });
      return () => element.removeEventListener('wheel', handleWheel);
    }
  }, []);

  return <div ref={targetDiv}>这里是需要监听滚轮的内容</div>;
}

类组件方案

在生命周期方法中绑定/解绑事件：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.targetDiv = React.createRef();
    this.handleWheel = this.handleWheel.bind(this);
  }

  componentDidMount() {
    this.targetDiv.current.addEventListener('wheel', this.handleWheel, { passive: false });
  }

  componentWillUnmount() {
    this.targetDiv.current.removeEventListener('wheel', this.handleWheel);
  }

  handleWheel(e) {
    if (e.ctrlKey) {
      console.log("wheel is called, then want to stop scroll!!");
      e.preventDefault();
      e.stopPropagation();
    }
  }

  render() {
    return <div ref={this.targetDiv}>这里是需要监听滚轮的内容</div>;
  }
}