Antd Popover内嵌Image预览时，关闭预览触发Popover关闭的解决方法

问题场景 #

在Antd的Popover组件中内嵌Image组件后，打开图片预览弹窗，点击预览区域或关闭预览时，Popover会跟着一起关闭。尝试给Image和外层div添加阻止冒泡事件，但未生效。

原尝试代码：

<Popover
  destroyTooltipOnHide
  trigger="click"
  placement="bottomLeft"
  content={
    <div onClick={stopPropagation}>
      <Image
        src="/money.png"
        alt="search"
        onClick={stopPropagation}
        width={40}
        height={40}
        preview={{
          visible: isPreviewVisible,
          onVisibleChange: (visible) => {
            setIsPreviewVisible(visible);
          },
        }}
      />
    </div>
  }
>
  content
</Popover>

解决方法 #

核心是手动接管Popover的显示状态，避免其被Image预览的事件触发自动关闭，同时在预览相关的事件链上彻底阻止冒泡。

修改后的完整代码：

import { useState } from 'react';
import { Popover, Image } from 'antd';

const Demo = () => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [isPreviewVisible, setIsPreviewVisible] = useState(false);

  const togglePopover = () => {
    setIsPopoverOpen(!isPopoverOpen);
  };

  const stopPropagation = (e) => {
    e?.stopPropagation() || window.event?.stopPropagation();
  };

  return (
    <Popover
      destroyTooltipOnHide
      trigger="click"
      placement="bottomLeft"
      open={isPopoverOpen}
      onOpenChange={setIsPopoverOpen}
      content={
        <div onClick={stopPropagation}>
          <Image
            src="/money.png"
            alt="search"
            width={40}
            height={40}
            preview={{
              visible: isPreviewVisible,
              onVisibleChange: (visible) => {
                setIsPreviewVisible(visible);
                stopPropagation(window.event);
              },
              onMaskClick: stopPropagation,
            }}
          />
        </div>
      }
    >
      <div onClick={togglePopover}>content</div>
    </Popover>
  );
};

export default Demo;

关键改动说明 #

• 手动控制Popover状态：通过open和onOpenChange绑定状态变量，让Popover的显示/关闭完全由代码控制，不再依赖默认的点击冒泡触发关闭
• 完善事件阻止逻辑：
  1. 在Image预览的onVisibleChange中调用阻止冒泡，避免预览关闭事件传递给Popover
  2. 给预览遮罩的点击事件onMaskClick绑定阻止冒泡，防止点击遮罩关闭预览时连带关闭Popover
  3. 兼容不同环境的事件对象，确保阻止冒泡生效
• 独立触发元素事件：给Popover的触发元素单独绑定togglePopover，确保只有点击触发元素才会切换Popover的显示状态

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