点击消失按钮时parent element.contains意外返回false的解决方向咨询

问题场景 #

需求是点击目标弹窗以外的区域时关闭弹窗，但点击弹窗内的「点击后消失的按钮」时，弹窗也被意外关闭了。相关实现代码如下：

const closingElementRef = useRef(null);

const handleClickOnDocument = useCallback(
    (e) => {
      const { target } = e;
         if (!closingElementRef.current?.contains(target)) { // 第(1)行
           closeDropDownFilter();
        }
    },
    [dropDownIsVisible],
  );

useEffect(() => {
    document.addEventListener('click', handleClickOnDocument);
    return () => document.removeEventListener('click', handleClickOnDocument);
  }, [handleClickOnDocument]);

return(
<div className='wrapper' >
  <div className='closingElement' ref={closingElementRef}>
    <button className='disappearingButton'>I will disappear after clicking on me</button>
    <button className='button'>I will NOT disappear after clicking on it</button>
  </div>
</div>
)

问题核心：点击disappearingButton后，第(1)行的判断返回false，导致触发closeDropDownFilter()。原因是按钮点击后被从DOM树移除，当事件冒泡到document时，closingElementRef.current.contains(target)检查的是已被移除的元素，因此返回false。

解决方向 #

1. 阻止内部按钮的事件冒泡 #

给「点击后消失的按钮」添加onClick事件，调用e.stopPropagation()阻止事件冒泡到document，这样handleClickOnDocument就不会被触发，避免误判断。

修改按钮代码：

<button 
  className='disappearingButton' 
  onClick={(e) => {
    e.stopPropagation();
    // 执行按钮本身的消失逻辑
    closeDropDownFilter();
  }}
>
  I will disappear after clicking on me
</button>

2. 先检查目标元素是否仍在DOM中 #

在判断是否点击外部区域前，先验证target是否还存在于document.body中。如果目标元素已被移除（比如内部按钮），则不执行关闭操作。

修改handleClickOnDocument的判断逻辑：

const handleClickOnDocument = useCallback(
    (e) => {
      const { target } = e;
      // 只有当目标元素仍在DOM中，且不在弹窗内部时才关闭
      if (document.body.contains(target) && !closingElementRef.current?.contains(target)) {
        closeDropDownFilter();
      }
    },
    [dropDownIsVisible],
);

3. 通过标记区分内部触发的关闭 #

添加状态标记，记录是否是内部按钮触发的关闭操作，在document的点击事件中跳过该场景的关闭逻辑。

const [isInternalClose, setIsInternalClose] = useState(false);

// 内部按钮的点击处理
const handleDisappearingBtnClick = () => {
  setIsInternalClose(true);
  closeDropDownFilter();
};

// 弹窗关闭后重置标记
useEffect(() => {
  if (!dropDownIsVisible) {
    setIsInternalClose(false);
  }
}, [dropDownIsVisible]);

// 修改document点击事件的判断
const handleClickOnDocument = useCallback(
    (e) => {
      if (isInternalClose) return;
      const { target } = e;
      if (!closingElementRef.current?.contains(target)) {
        closeDropDownFilter();
      }
    },
    [dropDownIsVisible, isInternalClose],
);

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