防止事件委托误伤兄弟模块的核心是通过规范化类名和data属性明确模块归属：使用模块前缀（如order-detail-card）、data-module显式声明、禁用通用类名与全局监听，并为Portal场景设计上下文透传与校验机制。
在大厂级复杂业务线中，防止事件委托“误伤兄弟模块”的核心不是靠更狠的 stopPropagation，而是让事件目标本身具备明确的模块归属——这靠的是规范化 DOM 类名 + 语义化 data 属性，从源头切断跨模块误响应。
用模块前缀锁死事件作用域
每个业务模块的 DOM 节点必须带唯一、稳定、可识别的命名空间前缀，例如：
-
order-detail-card（订单详情卡片） -
logistics-trace-step（物流轨迹步骤） -
finance-invoice-form（财务开票表单）
所有事件委托监听器只响应带对应前缀的目标元素，比如：
container.addEventListener('click', e => {
if (e.target.closest('.order-detail-card [data-action="edit"]')) {
// ✅ 只处理订单模块内的编辑操作
}
if (e.target.closest('.logistics-trace-step [data-action="expand"]')) {
// ✅ 只处理物流模块内的展开操作
}
});
用 data-module 显式声明模块身份
仅靠类名前缀还不够——当多个模块嵌套或 Portal 挂载时（如弹窗被挂到 body 下），DOM 层级可能脱离原始容器。此时需在根容器上加 data-module 属性：
<div data-module="order">...</div><section data-module="marketing">...</section>
事件委托中优先用 e.target.closest('[data-module]') 获取当前所属模块，再结合 data-action 做二级判断，避免仅靠 CSS 类名匹配导致的越界响应。
禁用无修饰的通用类名和全局选择器
以下写法必须在 CI/ESLint 中强制拦截：
- ❌
.btn、.delete、.item等无前缀通用类名（极易跨模块冲突） - ❌
document.addEventListener('click', handler)（无模块边界，天然高危） - ❌
document.querySelector('.action')（运行时无法区分归属）
取而代之的是：
- ✅
.order-action-btn、.marketing-delete-icon - ✅ 在各模块根容器内绑定委托，如
orderRoot.addEventListener('click', ...)
为 Portal 场景预留 fallback 机制
当子模块通过 React Portal 或手动 appendChild 挂载到非本模块 DOM 区域时，需主动透传模块上下文：
- Portal 容器自动继承父模块的
data-module和data-context-id - 事件委托回调中增加校验：
if (!moduleEl || moduleEl.dataset.module !== 'order') return; - 对跨模块浮层（如 Tooltip、Dialog），统一由主容器提供
dispatchModuleEvent()方法，禁止子模块直接发原生事件
