可通过监听 contextmenu 事件并调用 event.preventDefault() 阻止默认右键菜单，结合自定义 DOM 实现可控菜单；需注意定位计算、事件委托、移动端降级及无障碍支持。
可以通过监听 contextmenu 事件并调用 event.preventDefault() 来阻止浏览器默认右键菜单，再结合自定义 DOM 元素实现完全可控的右键菜单。
监听 contextmenu 并禁用默认行为
在目标元素（或 document）上绑定 contextmenu 事件，关键一步是立即调用 preventDefault()，否则系统菜单仍会弹出：
- 必须在事件处理函数第一行执行
event.preventDefault() - 推荐使用事件委托方式绑定到父容器，便于管理动态元素
- 注意：该事件不冒泡到
或外层，但可监听document
计算并定位自定义菜单位置
右键坐标来自 event.clientX 和 event.clientY，需转换为相对于视口的绝对位置，并考虑窗口滚动与边界限制：
- 直接用
left: e.clientX + 'px'、top: e.clientY + 'px'设置菜单样式 - 若菜单可能超出屏幕右侧/底部，可做偏移修正（例如：减去菜单宽高）
- 建议加简单判断，如
left = Math.min(left, window.innerWidth - menuWidth)
动态渲染菜单内容并绑定交互
菜单结构通常为 ，需支持上下文感知：
- 根据
event.target判断点击的是哪类元素（如表格行、图片、输入框），决定显示哪些选项 - 每个
绑定click事件，触发对应操作后调用menu.remove()隐藏 - 点击菜单外区域时，用
document.addEventListener('click', hideMenu)关闭（注意节流或 once）
补充细节与兼容性注意
实际开发中容易忽略但影响体验的关键点：
- 移动端无右键概念，
contextmenu在 iOS/Android 浏览器中基本无效，需搭配长按模拟 - 部分浏览器（如旧版 Safari）对
contextmenu支持不稳定，建议降级 fallback - 菜单元素应添加
position: fixed或absolute，并设z-index确保层级最高 - 键盘用户可能通过 Shift+F10 触发右键菜单，如需无障碍支持，应同步处理该快捷键
