要自定义右键上下文菜单，需监听contextmenu事件并调用event.preventDefault()阻止默认行为，再通过clientX/clientY定位显示HTML菜单，配合外部点击、Esc键关闭，并注意移动端兼容性及iframe限制。
在 JavaScript 中，右键触发的上下文菜单默认由浏览器显示，要自定义或拦截它，核心是监听 contextmenu 事件并调用 event.preventDefault() 阻止默认行为，再手动显示你的菜单。
监听 contextmenu 事件并阻止默认菜单
这是最基础也最关键的一步。右键点击元素时会触发 contextmenu 事件，只要在该事件处理器中阻止默认行为，原生右键菜单就不会出现：
- 使用
addEventListener('contextmenu', handler)绑定事件（推荐） - 在事件回调中立刻执行
event.preventDefault() - 注意：仅调用
preventDefault()不足以完全禁用右键（比如部分浏览器仍可能响应），但对隐藏上下文菜单已足够
手动定位并显示自定义菜单
阻止默认菜单后，你需要在鼠标点击位置动态显示自己的 HTML 菜单：
- 通过
event.clientX和event.clientY获取点击坐标 - 将自定义菜单元素（如
<div class="custom-menu">）设置为position: absolute - 用 JS 设置其
style.left和style.top，适配视口边界（避免菜单被截断） - 建议添加
event.stopPropagation()防止事件冒泡影响父级监听
关闭菜单与清理逻辑
自定义菜单需要合理关闭机制，否则会残留：
- 点击菜单外部时关闭：监听
document的click或mousedown，判断点击目标是否不在菜单及其触发元素内 - 按
Esc键关闭：监听keydown，检查event.key === 'Escape' - 菜单项点击后，通常需隐藏菜单并执行对应操作（如复制、删除等）
兼容性与注意事项
虽然 contextmenu 是标准事件，但仍需留意：
- 移动端一般不触发
contextmenu（长按行为不同），如需支持需额外处理touchstart+ 定时器模拟 - 某些浏览器（如旧版 Safari）对
preventDefault()在contextmenu中的支持较弱，可配合oncontextmenu="return false"属性兜底 - 若页面有 iframe，其内部右键不受外层 JS 控制，需在 iframe 内单独绑定
