React组件点击事件触发两次且阻止冒泡失效的原因及解决办法

问题背景 #

我有一个App组件及其子组件Box，目标是监听App组件的点击事件，同时点击Box时阻止事件冒泡。现有代码如下：

App.js #

function App() {
  const handleClick=()=>{
    console.log("Clicked on the app")
  }
  document.addEventListener('click', handleClick, true);
  return (
    <div className="wrapper">
    <Box ></Box>
    </div>
  );
}
export default App;

Box.js #

export function Box(){
    const onSelect=(e)=>{
        e.stopPropagation();
    }
    return (
        <div tabIndex="0" onClick={onSelect}>Box</div>
    )
}

出现两个问题：

• 每次点击都会输出两条控制台日志
• 点击Box无法阻止事件冒泡，仍会输出两条日志

原因分析 #

1. 重复输出日志的根源 #

组件函数每次执行（初始渲染、重渲染）都会调用document.addEventListener，这会导致同一个handleClick函数被多次绑定到document的点击事件上。每次点击时，所有绑定的实例都会触发，因此日志重复输出。此外，这种写法还会造成内存泄漏——组件卸载后，事件监听器不会自动移除。

2. 阻止冒泡失效的原因 #

document.addEventListener的第三个参数true指定了事件在捕获阶段触发，而React的onClick事件是在冒泡阶段执行的。点击Box时，事件会先从document开始向下捕获传递，此时document的监听器已经执行完毕；进入冒泡阶段后，Box的e.stopPropagation()只能阻止事件向上冒泡，无法回溯已经执行的捕获阶段逻辑，所以App的日志依然会输出。

解决方案 #

推荐实现：利用React组件内事件绑定 #

放弃全局绑定document的方式，直接在App的wrapper容器上绑定点击事件，适配React的事件委托机制：

修改后的App.js

import Box from './Box';

function App() {
  const handleClick = () => {
    console.log("Clicked on the app");
  };

  return (
    <div className="wrapper" onClick={handleClick}>
      <Box />
    </div>
  );
}

export default App;

Box.js（无需修改）

export function Box(){
    const onSelect=(e)=>{
        e.stopPropagation();
    }
    return (
        <div tabIndex="0" onClick={onSelect}>Box</div>
    )
}

可选：全局监听document的正确姿势 #

如果确实需要全局监听document点击，必须用useEffect控制绑定时机，确保只绑定一次，并在组件卸载时移除监听器：

import { useEffect } from 'react';
import Box from './Box';

function App() {
  const handleClick = () => {
    console.log("Clicked on the app");
  };

  useEffect(() => {
    // 组件挂载时绑定事件
    document.addEventListener('click', handleClick);
    // 组件卸载时移除事件
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="wrapper">
      <Box />
    </div>
  );
}

export default App;

此时若要阻止Box触发document的监听，需要改用e.stopImmediatePropagation()或者在捕获阶段阻止，但更合理的方式还是用组件内事件绑定。

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