多层蒙层嵌套时，应在根容器用捕获阶段监听点击，通过event.target.closest('[data-dialog]')识别目标层，校验是否为可激活区域，再同步提升z-index与焦点管理，并防重复触发。
在多层蒙层（如模态框、弹窗、遮罩）嵌套场景中，点击任意一层时，需让该层成为“当前焦点层”并置顶显示，同时确保事件不误触下层。关键不是靠 z-index 硬调，而是用事件捕获阶段精准识别真实点击目标，并结合层级语义动态锁定焦点。
捕获阶段监听：从根容器统一接管点击
不要给每层蒙层单独绑定 click 事件——容易因冒泡混乱或 stopPropagation 滥用导致逻辑断裂。应把事件监听器加在最外层容器（如 body 或主布局根节点），配置 { capture: true }：
- 捕获阶段能最早拿到
event.target，即用户真正点中的 DOM 节点 - 此时事件尚未进入目标层，也未开始冒泡，天然避开子元素拦截干扰
- 配合
event.target.closest('[data-dialog]')向上查找最近的可聚焦蒙层，避免依赖固定 class 或硬编码层级结构
动态识别“最高有效层级”
仅找到被点击的蒙层还不够——它可能只是某层蒙层内部的按钮或内容区。需判断点击是否落在“可激活区域”（如标题栏、边框、遮罩本体），而非其子控件：
- 检查
event.target是否匹配[data-dialog-header], [data-dialog-mask], [data-dialog-root]等语义化属性 - 若命中子控件（如内部按钮、输入框），且该控件本身不需要提升层级，则忽略本次置顶逻辑
- 用
event.composedPath()可获取完整捕获路径，在 Shadow DOM 场景下也能准确定位
焦点锁定与视觉置顶同步执行
识别出目标蒙层后，需同时完成两件事：视觉层级提升 + 焦点管理生效：
- 提取该蒙层对应的遮罩层（通常紧邻或通过
data-dialog-id关联），将其z-index设为当前最大值，蒙层本体设为z-index + 1 - 调用
element.focus()并配合autofocus属性或focusable属性确保键盘焦点进入该层 - 若使用
react-focus-lock或类似库，触发其activateTrap()方法，传入当前蒙层 ID，让它自动挂起低优先级锁
防干扰设计：避免重复触发与穿透
多层嵌套极易因事件重叠引发多次置顶或焦点错乱：
- 在捕获回调中调用
event.stopPropagation()—— 注意只在确认是有效置顶操作后才调用，防止阻断表单提交等必要冒泡 - 对遮罩层启用
pointer-events: auto，但对其内部非交互区域（如纯背景）设为none，减少误点 - HarmonyOS 场景下，可配合
hitTestBehavior="Transparent"让遮罩响应点击又透传手势，兼顾滑动调节等需求
