React中document.addEventListener绑定后立即触发问题求助

问题原因 #

这是事件冒泡机制导致的：
当你点击Click1按钮时，按钮的onClick回调（click1函数）先执行，完成document的click事件绑定；但按钮自身的click事件会沿着DOM树向上冒泡，最终到达document节点——此时document已经绑定了start处理函数，所以这个冒泡过来的事件会立即触发start，导致控制台打印"start"。

而Click2的场景中，我们给<p id="p">绑定click事件，按钮的click事件冒泡路径不会触发p元素的事件，因此不会立即执行start。

解决办法 #

1. 阻止按钮事件冒泡

修改click1函数，在绑定事件前阻止按钮的click事件向上传播：

const click1 = (event) => {
  // 阻止事件冒泡到document
  event.stopPropagation();
  document.addEventListener("click", start);
};

这样按钮的click事件不会传递到document，绑定事件后就不会立即触发start。

2. 过滤事件触发源

在start函数中判断事件目标，跳过来自Click1按钮的冒泡事件：

const start = (event) => {
  // 判断如果是Click1按钮触发的事件，直接返回
  const target = event.target;
  if (target.tagName === 'BUTTON' && target.textContent.trim() === 'Click1') {
    return;
  }
  console.log("start");
};

额外注意点 #

多次点击Click1会重复给document绑定start事件，后续每次点击document都会多次触发start。可以添加状态控制避免重复绑定：

import { useState } from 'react';

export default function App() {
  const [docClickBound, setDocClickBound] = useState(false);
  const start = () => {
    console.log("start");
  };
  const click1 = (event) => {
    event.stopPropagation();
    if (!docClickBound) {
      document.addEventListener("click", start);
      setDocClickBound(true);
    }
  };

  // ... 其余代码不变
}

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