本文提供一种无需 stopPropagation() 且避免重复绑定/解绑的纯事件委托方案，通过精准目标检测与 CSS 状态驱动，实现菜单的打开、切换、关闭及外部点击收起的一致行为。
本文提供一种无需 `stoppropagation()` 且避免重复绑定/解绑的纯事件委托方案，通过精准目标检测与 css 状态驱动，实现菜单的打开、切换、关闭及外部点击收起的一致行为。
在构建动态上下文菜单（如表格行操作菜单）时，常见的痛点是：点击“打开”按钮后，再次点击另一行的“打开”按钮无法自动关闭前一个菜单；而若移除 e.stopPropagation()，又会导致刚打开菜单即被 document 级监听器误判为“外部点击”而立即关闭。传统做法依赖频繁增删全局事件监听器，不仅性能低、易出竞态，还让逻辑耦合严重。
根本问题不在传播控制，而在事件职责划分不清。理想方案应遵循单一入口、条件分发原则：所有点击均由一个 document 级监听器捕获，再根据 e.target 的精确语义决定行为——而非靠阻止冒泡来“掩耳盗铃”。
以下是优化后的完整实现：
document.addEventListener("click", handle);
function handle(e) {
// 1. 处理行操作按钮（Open/Close）
const btnOption = e.target.closest(".btn_option");
if (btnOption) {
const row = e.target.closest(".row");
const menu = document.querySelector(".menu");
if (!row.classList.contains("selected")) {
// 打开新菜单：先关闭已有选中项，再定位并显示
document.querySelector(".selected")?.classList.remove("selected");
menu.style.top = btnOption.getBoundingClientRect().top + "px";
menu.classList.add("visible");
row.classList.add("selected");
} else {
// 关闭当前菜单
menu.classList.remove("visible");
row.classList.remove("selected");
}
return; // 阻止后续处理
}
// 2. 点击菜单内部（含按钮），保持菜单可见
if (e.target.closest(".menu")) {
// 若点击的是菜单内的功能按钮，可执行对应操作（示例：打印文本）
if (e.target.nodeName === "BUTTON" && e.target.parentElement.classList.contains("menu")) {
console.log(`Menu action: ${e.target.textContent}`);
}
return;
}
// 3. 其他所有点击（文档空白、其他元素）→ 收起菜单 & 取消选中
menu.classList.remove("visible");
document.querySelector(".selected")?.classList.remove("selected");
}配套 CSS 精简关键部分（状态驱动 UI）：
.menu {
display: none; /* 默认隐藏 */
/* ...其余样式保持不变... */
}
.menu.visible {
display: flex; /* 仅靠 class 控制显隐 */
}
/* 按钮文字由父级 .row.selected 状态决定 */
.row .btn_option::after {
content: "Open";
}
.row.selected .btn_option::after {
content: "Close";
}HTML 结构同步简化（移除冗余 span，交由伪元素控制文案）：
<div class="table">
<div class="row">
<span>Item 1</span>
<button class="btn_option"></button>
</div>
<!-- 更多行... -->
</div>
<div class="menu">
<button>View</button>
<button>Edit</button>
<button>Delete</button>
</div>✅ 优势总结：
- 零 stopPropagation()：完全规避传播控制引发的连锁问题；
- 单监听器，高性能：不重复 addEventListener/removeEventListener，无内存泄漏风险；
- 状态驱动 UI：.selected 和 .visible 类统一管理视觉与逻辑状态；
- 开箱即用的切换逻辑：点击已展开行的按钮 → 自动收起；点击其他行 → 自动切换；点击外部 → 全局收起；
- 可扩展性强：新增菜单项或交互逻辑只需修改 handle() 内对应分支，不侵入事件绑定层。
此模式适用于所有类似场景：下拉菜单、弹出面板、折叠卡片等需要“点击触发 + 点击外部关闭”的交互组件。
