当前位置：首页 > React

React如何组织事件冒泡

2026-03-10 22:35:05React

阻止事件冒泡的方法

在React中阻止事件冒泡主要通过event.stopPropagation()方法实现。React的事件系统基于合成事件（SyntheticEvent），与原生DOM事件行为一致但具有跨浏览器兼容性。

function handleClick(event) {
  event.stopPropagation(); // 阻止事件冒泡
  console.log('子元素点击事件触发');
}

function ParentComponent() {
  return (
    <div onClick={() => console.log('父元素点击事件不会触发')}>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}

阻止默认行为的方法

有时需要同时阻止默认行为和冒泡，可以使用event.preventDefault()结合event.stopPropagation()。

React如何组织事件冒泡

function handleLinkClick(event) {
  event.preventDefault();
  event.stopPropagation();
  console.log('链接点击但不会跳转');
}

<a href="https://example.com" onClick={handleLinkClick}>阻止跳转</a>

事件捕获阶段处理

React支持在事件捕获阶段处理逻辑，通过在事件名后加Capture后缀实现。这种方式可以在冒泡前拦截事件。

React如何组织事件冒泡

function handleCaptureClick(event) {
  console.log('捕获阶段触发');
}

<div onClickCapture={handleCaptureClick}>
  <button onClick={() => console.log('冒泡阶段触发')}>点击测试</button>
</div>

合成事件池注意事项

React的合成事件会被回收以提高性能，异步访问事件属性需调用event.persist()。

function handleAsyncClick(event) {
  event.persist(); // 保留事件引用
  setTimeout(() => {
    console.log(event.type); // 异步访问事件属性
  }, 1000);
}

原生事件混合处理

当需要与第三方库或原生DOM事件交互时，需注意React事件系统与原生事件的执行顺序。原生事件会先于React事件触发。

useEffect(() => {
  const div = document.getElementById('native-div');
  div.addEventListener('click', (e) => {
    console.log('原生事件先触发');
  }, false);
}, []);

<div id="native-div" onClick={() => console.log('React事件后触发')}></div>