React Popover点击打开按钮自动关闭的原因及解决方案原理问询

目标 #

在React中实现popover（模态框）：点击按钮打开popover，点击popover外部时关闭它。

实现逻辑 #

通过状态条件渲染popover组件；在popover组件中为document添加click事件监听器，点击document时将状态设为false以隐藏popover。

遇到的问题 #

点击打开popover的按钮后，事件监听器被触发，导致popover刚打开就自动关闭，需要明确问题的成因。

代码示例 #

TaskButton.js #

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;

Popover.js #

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;

问题成因 #

核心是事件冒泡 + React状态更新的时机：

1. 点击按钮时，按钮的onClick触发，把isPopoverShown设为true。
2. React状态更新后，Popover组件挂载到DOM，useEffect立即执行，给document添加了click事件监听器。
3. 但按钮的click事件还在冒泡阶段，会继续向上传播到document，触发刚添加的监听器。
4. 此时popoverRef.current是Popover的DOM元素，而event.target是按钮，两者不相等，所以调用onClose把状态设为false，导致Popover刚挂载就被关闭。

两种解决方案的原理 #

1. 将事件从click改为mousedown/mouseup #

浏览器事件触发顺序为：mousedown → mouseup → click。

• 用mousedown打开：按钮的mousedown触发后，Popover挂载并添加document的mousedown监听器，但此时按钮的mousedown事件已经完成冒泡，不会触发新监听器；后续点击外部时，mousedown事件会触发监听器关闭Popover。
• 用mouseup打开：按钮的mouseup触发后，Popover挂载并添加document的mouseup监听器，此时按钮的mouseup事件已经完成冒泡，不会触发新监听器；后续点击外部的mouseup事件会正常触发关闭逻辑。

2. 将事件监听器的捕获选项设为true #

浏览器事件流分为捕获阶段→目标阶段→冒泡阶段，默认addEventListener只在冒泡阶段触发。

• 设为捕获模式后，document的click监听器会在捕获阶段触发。点击按钮时，事件先进入捕获阶段（此时Popover还没挂载，监听器未添加），不会触发；按钮的onClick触发后Popover挂载，此时事件已经进入冒泡阶段，捕获模式的监听器不会在冒泡阶段响应；后续点击外部时，事件的捕获阶段会触发document的监听器，正常关闭Popover。

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