实现自定义右键菜单需监听contextmenu事件并调用preventdefault()阻止默认菜单，动态创建dom并用fixed定位至鼠标位置，检查视口边界防止溢出，点击外部或按esc关闭，添加aria属性提升可访问性。
在网页中实现自定义右键菜单，核心是监听 contextmenu 事件、阻止默认行为，并在鼠标位置动态显示自定义菜单元素。关键在于准确拦截、精确定位、合理交互和优雅收尾。
监听 contextmenu 并阻止默认菜单
右键触发的系统菜单（如“复制”“查看页面源代码”）由浏览器原生控制。要禁用它，必须在目标元素上监听 contextmenu 事件，并立即调用 event.preventDefault()。
- 推荐绑定到具体容器（如
div#editor），避免全局监听影响其他区域（如输入框仍需原生菜单） - 注意事件冒泡：若父层已阻止，子元素无需重复阻止；但子元素可单独处理自己的菜单逻辑
- 移动端无右键概念，该方案仅适用于桌面端（可结合
touchstart+ 长按模拟，但属延伸需求）
动态创建并定位自定义菜单
菜单 DOM 应在事件触发时生成或复用隐藏节点，位置依据 event.clientX 和 event.clientY 计算，同时考虑视口边界。
- 使用
position: absolute或fixed定位；推荐fixed，避免滚动时错位 - 检查右下角是否超出窗口：
const x = Math.min(e.clientX, window.innerWidth - menu.offsetWidth) - 同理处理 y 轴，防止菜单被底部遮挡；必要时可向上展开（判断
e.clientY > window.innerHeight / 2）
菜单交互与关闭逻辑
自定义菜单需响应点击，并在合适时机自动关闭，避免残留。
- 菜单项用
click事件绑定操作，如item.addEventListener('click', () => { doSomething(); hideMenu(); }) - 点击菜单外部关闭：监听
document的click，用e.target.closest('.custom-menu')判断是否点中菜单本身 - 键盘支持：按
Esc键关闭菜单（监听keydown，e.key === 'Escape'）
样式与可用性建议
菜单需视觉清晰、操作明确，兼顾无障碍基础要求。
- 添加
role="menu"和菜单项role="menuitem"，提升屏幕阅读器识别度 - 用
tabindex="0"让菜单项可聚焦，配合键盘↑ ↓导航（进阶功能，非必需但推荐） - 避免纯 CSS 实现（如
:hover），因右键不触发 hover；必须依赖 JS 控制显隐
