javascript - React document.addEventListener 立即触发

Question

我搜索过这个问题。

它必须是传递函数引用。

document.addEventListener("click", () => {}, false)

但我所做的仍然是立即开火。

我是不是做错了什么？

测试代码如下

export default function App() {
  const start = () => {
    console.log("start");
  };
  const click1 = () => {
    document.addEventListener("click", start);
  };

  const click2 = () => {
    const element = document.getElementById("p");
    element.addEventListener("click", start);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <button onClick={click1}>Click1</button>
      <hr />

      <p id="p">123</p>
      <button onClick={click2}>Click2</button>
    </div>
  );
}

// Click1 -  immediately, problem here

// Click2 - no immediately

https://codesandbox.io/s/reverent-grass-5fok7b?file=/src/App.js

我的期望

先点击，添加点击事件，不记录任何内容。

单击第二个，记录'start'

实际输出

先点击，添加点击事件，记录start。

Answer 1

您正在处理 SyntheticEvent使用您的 onClick 处理程序并在 document 级别添加 native 事件监听器。添加监听器将在事件冒泡到顶部之前完成，因此您还会看到它针对原始事件执行。

如果您不希望发生这种情况，请阻止事件冒泡

const click1 = (e) => {
  e.stopPropagation();
  document.addEventListener("click", start);
};

---

仅供引用，您还应该在组件卸载时删除 DOM 监听器

useEffect(() => () => document.removeEventListener("click", start), []);