自定义右键菜单需阻止默认行为、精准捕获触发元素、用事件委托处理菜单项点击、捕获阶段监听document点击关闭菜单，并基于contextmenu事件坐标定位。
在自定义右键菜单组件中，事件冒泡本身不是目标，而是要阻止默认右键行为、捕获触发源、精准定位菜单弹出位置，并隔离菜单自身交互不干扰外层逻辑。关键不在“利用冒泡”，而在于合理中断与委托结合，配合事件流各阶段精准控制。
阻止默认行为 + 捕获触发元素（关键第一步）
右键事件（contextmenu）默认会打开浏览器原生菜单，必须在捕获或冒泡阶段第一时间 e.preventDefault()，否则后续一切无效。同时，需确保获取的是原始触发元素（比如你点击的表格行、列表项），而不是菜单容器本身。
- 在目标区域（如
.list-item）监听contextmenu，而非全局 document —— 避免误拦截非目标区域右键 - 在事件处理器中直接调用
e.preventDefault()和e.stopPropagation()（可选，视是否需要阻止冒泡到父级业务逻辑而定） - 用
e.target或e.currentTarget确定被点击的具体 DOM 节点，存为菜单上下文数据
菜单渲染后绑定事件，用事件委托避免重复绑定
菜单是动态创建的（如 document.body.appendChild(menuEl)），不能对每个菜单项写独立监听器。应在菜单容器上用事件委托处理点击，同时借助事件冒泡天然特性完成“子项响应”。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 给菜单 DOM 元素（如
<div class="custom-menu">）绑定click事件 - 在 handler 中通过
e.target.closest('li[data-action]')匹配实际点击的菜单项 - 这样即使菜单反复销毁重建，也不需重新绑定每个
<li>，且冒泡让委托生效
关闭菜单时注意事件流层级，避免误关
常见需求：点击菜单外区域关闭菜单。但若直接监听 document.click，菜单项点击也会冒泡触发关闭 —— 因为菜单项属于 document 子树。
立即学习“Java免费学习笔记（深入）”；
- 在
document的捕获阶段监听click（useCapture: true），此时菜单还没收到事件，可提前判断e.target是否在菜单及其触发源内 - 更稳妥做法：在菜单
show()时，同时监听一次document.click，并在 handler 中检查e.target === menuEl || menuEl.contains(e.target) || triggerEl.contains(e.target)，都不满足才关闭 - 记得在菜单隐藏或销毁时移除该监听，防止内存泄漏
坐标定位靠事件对象，不依赖冒泡
菜单弹出位置由鼠标坐标决定，和事件流无关。但要注意：contextmenu 事件对象自带 clientX/clientY，比事后查 getBoundingClientRect() 更准、更及时。
- 直接使用
e.clientX和e.clientY计算菜单left/top值 - 考虑视口边界：若靠近右/下边缘，自动反向偏移，避免菜单被裁剪
- 不要在菜单 DOM 渲染后再去查触发元素位置——可能已滚动或重排，应以事件发生瞬间坐标为准
