阻止 antd Popover弹框 点击事件冒泡

场景

点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件

const content = (
  <div>
    <p onClick={() => console.log("点击Popover")}>Content</p>
  </div>
);
const App = () => (
  <div id="wrapper" onClick={() => console.log("点击wrapper")}>
    <Popover visible={true} content={content} title="Title" placement="right">
      <div className="box">Hover me</div>
    </Popover>
  </div>
);

解决

设置e.stopPropagation(); 阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件

const content = (
  <div>
    <p
      onClick={(e) => {
        e.stopPropagation();
        console.log("点击Popover");
      }}
    >
      Content
    </p>
  </div>
);

但是，点击Popover边缘区域仍会触发wrapper容器的点击事件

这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding

.ant-popover-content .ant-popover-inner {
  padding: 0;
}

如果需要padding，可以在content上自己设置需要的padding

const title = <div style={{ padding: "12px 12px 6px" }}>Title</div>;

const content = (
  <div style={{ padding: "6px 12px 12px" }}>
    <p
      onClick={(e) => {
        e.stopPropagation();
        console.log("点击Popover");
      }}
    >
      Content
    </p>
  </div>
);

const App = () => (
  <div id="wrapper" onClick={() => console.log("点击wrapper")}>
    <Popover visible={true} content={content} title={title} placement="right">
      <div className="box">Hover me</div>
    </Popover>
  </div>
);