JavaScript实现自定义右键菜单需拦截contextmenu事件并阻止默认行为，动态创建绝对定位菜单DOM，精确计算鼠标坐标并防溢出，绑定点击与Esc/失焦关闭逻辑，配合CSS样式及可访问性属性。
在 JavaScript 中实现自定义右键菜单栏，核心是拦截默认右键事件（contextmenu），动态创建并定位一个 <div> 菜单元素，再绑定点击选项的逻辑。关键点在于：阻止默认菜单、精确计算鼠标位置、管理菜单显示/隐藏、避免内存泄漏。<h3>1. 阻止默认右键行为并捕获坐标</h3>
<p>监听目标区域的 <code>contextmenu 事件，调用 event.preventDefault() 禁用浏览器默认菜单，并用 event.clientX 和 event.clientY 获取屏幕坐标：
- 推荐监听整个
document，便于全局触发；也可限定在某个容器内（如#app） - 注意移动端没有右键，该功能仅适用于桌面端
- 若需兼容 iframe 或 shadow DOM，需额外处理事件委托和坐标转换
2. 动态创建并定位菜单 DOM 元素
菜单应为绝对定位的 <div>，包含若干 <code><button></button> 或 <span></span> 选项项。定位时需考虑窗口边界，防止菜单溢出：
- 用
style.left = (x + offset) + 'px'和style.top = (y + offset) + 'px'设置初始位置 - 检查
x + 菜单宽度 > window.innerWidth，若超出则左对齐：left = window.innerWidth - menu.offsetWidth - 同理检查垂直方向，必要时向上偏移（
top = y - menu.offsetHeight）
3. 绑定菜单项点击与关闭逻辑
每个菜单项需绑定点击回调，并在点击后或失焦时自动隐藏菜单：
立即学习“Java免费学习笔记（深入）”；
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 点击某一项后，执行对应操作（如复制、删除、跳转），然后调用
menu.remove()或menu.style.display = 'none' - 监听
document.click，判断点击是否在菜单外部，是则关闭菜单 - 添加
Esc键监听：document.addEventListener('keydown', e => e.key === 'Escape' && menu?.remove())
4. 样式与可访问性建议
纯 JS 创建的菜单需配合 CSS 才可用，且要考虑基础体验：
- 菜单
position: absolute; z-index: 9999;，背景、边框、圆角、阴影提升质感 - 菜单项用
display: block; padding: 6px 12px;，悬停加背景色，保持可点击热区 - 为菜单添加
role="menu"，每项加role="menuitem"，支持屏幕阅读器 - 避免使用
opacity: 0 / visibility: hidden隐藏——应直接remove()或display: none，减少 DOM 干扰
不复杂但容易忽略细节。只要控制好事件流、坐标、生命周期和样式，就能做出轻量又可靠的右键菜单。
