JavaScript 中处理右键菜单需监听 contextmenu 事件并调用 event.preventDefault() 阻止默认行为，再用 clientX/clientY 定位自定义菜单，通过 classList 或 style 控制显隐，并注意移动端不支持及边界检测等兼容性问题。
在 JavaScript 中，处理右键上下文菜单（即 contextmenu 事件）的核心是监听该事件并调用 event.preventDefault() 来阻止浏览器默认菜单弹出，再手动显示自定义菜单。
监听 contextmenu 事件并阻止默认行为
右键点击会触发 contextmenu 事件，它和 click 类似，但只响应鼠标右键（或键盘菜单键）。必须显式阻止默认行为，否则系统菜单会覆盖你的自定义菜单：
- 给目标元素（如
div、table或整个document）添加addEventListener('contextmenu', handler) - 在事件处理器中第一时间调用
event.preventDefault() - 注意：不能仅靠
return false—— 它在现代事件监听器中不等价于preventDefault+stopPropagation
获取点击位置并定位自定义菜单
自定义菜单通常需要出现在鼠标点击处。推荐使用 event.clientX 和 event.clientY（视口坐标），再结合 CSS 的 position: fixed 或 absolute 实现精准定位：
-
clientX/clientY不受页面滚动影响，适合fixed定位的菜单 - 若菜单容器是相对定位元素的子元素，改用
event.pageX/pageY并减去容器偏移（需注意兼容性） - 建议加边界检测：避免菜单超出视口（例如右侧/底部空间不足时自动左对齐或上翻）
显示与隐藏自定义菜单的常用方式
菜单本身一般是一个隐藏的 <div class="custom-menu"> 元素，通过切换 CSS 类或内联样式控制显隐：
立即学习“Java免费学习笔记（深入）”；
- 用
element.style.display = 'block'或classList.add('show')显示 - 点击菜单外部时关闭：监听
document.click，用event.target.closest('.custom-menu')判断是否点在菜单内 - 按
Escape键关闭：监听document.keydown，检查event.key === 'Escape'
注意事项与兼容性提醒
某些场景下行为容易出错，需特别留意：
- 移动端没有右键概念，
contextmenu在多数触摸设备上不会触发（iOS Safari 完全不支持），不要依赖它做核心交互 - 部分浏览器（如旧版 Firefox）可能在长按后触发
contextmenu，需测试真实设备 - 如果菜单内容动态生成（如根据右键目标元素不同显示不同选项），可在事件处理器中通过
event.target获取被点击元素并判断类型
