React popover（modal） 在我单击打开按钮（事件侦听器）后自动关闭

问：

目标：我想在 React 中实现一个 popover（modal）。 当用户单击按钮时，弹出框将打开。 当用户在弹出框外部单击时关闭弹出框。

逻辑：使用状态有条件地渲染弹出框组件。 在 popover 组件中，添加事件监听器，用于监听文档的 click 事件。 如果用户单击文档，它会将状态更改为 false，以不呈现弹出框组件。

问题：如果我单击按钮打开弹出框，则触发事件侦听器。 这样弹出框就会自动关闭。

我想知道为什么会这样。

import { useState } from "react";
import Popover from "./Popover";

const TaskButton = () => {
  const [isPopoverShown, setIsPopoverShown] = useState(false);

  const popoverOpenHandler = () => {
    setIsPopoverShown(true);
  };

  const popoverCloseHandler = () => {
    setIsPopoverShown(false);
  };

  return (
    <div>
      <button
        onClick={popoverOpenHandler}
      >
        button
      </button>
      {isPopoverShown && (
        <Popover isOpen={isPopoverShown} onClose={popoverCloseHandler}>
          hello
        </Popover>
      )}
    </div>
  );
};

export default TaskButton;

import React, { useEffect, useRef } from "react";

const Popover =({ onClose, children }) => {
  const popoverRef = useRef(null);

  useEffect(() => {
    
    const pageClickEvent = (event) => { 
      if (popoverRef.current !== event.target) { 
        onClose();
      }
    };

    document.addEventListener("click", pageClickEvent); 
    
    return () => {
      document.removeEventListener("click", pageClickEvent);
    };
  }, [onClose]);

  return <div ref={popoverRef}>{children}</div>;
}

export default Popover;

我的想法：

我认为问题来自事件冒泡和捕获。

document.addEventListener("mousedown", pageClickEvent); document.addEventListener("click", pageClickEvent, true);

因为当我更改其中一个代码时，它会按照我的预期工作。

但是我想知道如果我将事件“click”更改为“mousedown”（或向上），为什么它会起作用。 或者，如果我将捕获选项更改为 true。

我认为只有当组件挂载在 DOM 上时，事件侦听器才会被激活。 因此，不应通过单击按钮打开组件本身来触发事件侦听器。