React createPortal 里的点击为什么还会冒泡到逻辑父组件

会冒泡是正常行为，不是 createPortal 失效。Portal 只把节点放到另一个 DOM 容器，组件仍然挂在原来的 React 树上，所以 Portal 内的点击会沿 React 树到达逻辑父组件的 onClick。修复时优先在 Portal 内容入口调用 event.stopPropagation()；如果父子职责本来就不该相连，再调整 Portal 在 React 树中的位置。

官方文档：https://react.dev/reference/react-dom/createPortal

先把 React 树和 DOM 树分开看

下面的例子把弹窗挂到 document.body。从浏览器 DOM 看，弹窗已经离开了面板；从 React 看，createPortal 返回的节点仍是 Panel 的子内容。

import { useState } from 'react';
import { createPortal } from 'react-dom';

function Panel() {
  const [open, setOpen] = useState(false);

  function handlePanelClick() {
    console.log('Panel onClick'); // 记录逻辑父组件是否收到事件
  }

  return (
    

       setOpen(true)}>打开弹窗
      {open && createPortal(
        

           setOpen(false)}>关闭
        
,
        document.body // 只改变物理挂载点，不改变 React 归属
      )}
    
  );
}

因此，点击“关闭”时，按钮自己的处理器先处理交互，事件仍可能继续到 Panel。如果面板的 onClick 会关闭弹窗、选中卡片或触发提交，就会出现“明明点击了弹窗，背景逻辑也执行了”的现象。

用三个字段确认到底是谁收到了事件

排查时不要只看 DOM 检查器中的缩进关系。临时把事件对象记录下来，比较实际点击节点、当前处理器节点和事件类型：

function handlePanelClick(event) {
  console.log({
    type: event.type, // 确认是否为 click，而不是键盘或指针事件
    target: event.target, // 真正被点击的 Portal 内部节点
    currentTarget: event.currentTarget // 当前执行 Panel 处理器的节点
  });
}

这一步能区分两类问题：若 target 已经是 Portal 内容，说明不是点击穿透；若 currentTarget 变成了 Panel，则是 React 树上的传播。

在 Portal 内容入口阻断不需要上行的点击

弹窗内部的按钮仍然可以执行自己的逻辑，只需要在 Portal 根节点或明确的交互边界处停止继续传播：

function Modal({ onClose, onSave }) {
  function stopAtModal(event) {
    event.stopPropagation(); // 阻断到 Panel 的 React 冒泡，保留弹窗内部处理
  }

  return createPortal(
    

      保存
      取消
    
,
    document.body // 目标节点必须已经存在
  );
}

不要把 preventDefault() 当成替代品：它影响浏览器默认行为，不负责停止事件向父处理器传播。若 Portal 里还嵌套了需要独立响应的区域，可把阻断点放在更窄的组件边界，避免整个弹窗失去组合能力。

什么时候应该移动 Portal 的 React 位置

如果一个页面卡片负责选中，弹窗却代表全局工作流，那么让弹窗继续成为卡片的 React 子节点会把两个交互职责绑在一起。此时可以把 Portal 提升到页面根部，由状态或回调把必要数据传入；这样背景卡片的 onClick 不再天然成为它的逻辑父处理器。

可以按下面的顺序做检查：先确认 Portal 的 domNode 已存在；再确认父组件的 onClick 是否确实需要响应 Portal 点击；最后才添加 stopPropagation()。这样既能修复误触发，也不会把真正需要的事件链一刀切断。

相关问题

createPortal 会不会让 React context 失效？

不会。Portal 内容仍在原 React 树中，可以访问逻辑父树提供的 context；改变的是 DOM 挂载位置。

只把弹窗 DOM 放到 body 就能避免父组件点击吗？

不能。DOM 位置改变不等于 React 事件路径改变，仍需阻断事件或调整 React 组件边界。

应该在按钮上还是弹窗根节点上调用 stopPropagation？

如果弹窗内大多数点击都不应触发背景逻辑，放在弹窗根节点更稳定；只有单个控件需要隔离时，才缩小到按钮。