HTML默认右键菜单由浏览器原生控制，无法通过API修改；自定义右键菜单需拦截contextmenu事件、手动创建DOM并处理定位、交互与销毁等细节。
HTML 默认右键菜单和自定义右键菜单本质不同：前者是浏览器原生行为，后者是通过拦截事件 + 手动 DOM 渲染实现的完全独立 UI。
默认右键菜单无法直接修改内容
浏览器右键弹出的菜单（含“查看网页源代码”“另存为”“复制图片”等）由渲染引擎控制，HTML/CSS/JS 没有 API 可增删其中的条目或改写文字。试图用 contextmenu 事件修改它，只会触发拦截，不会编辑它。
- 监听
contextmenu事件后调用e.preventDefault()，只是阻止默认菜单出现 -
document.addEventListener('contextmenu', e => e.preventDefault())会全局禁用右键菜单，但没生成任何新菜单 - 不调用
preventDefault()，自定义逻辑仍会执行，但原生菜单也会照常弹出——两者并存，不是融合
自定义右键菜单 = 完全新建 DOM + 定位 + 交互
所谓“自定义右键菜单”，其实是用 div + ul 等标签手绘一个菜单容器，靠 event.clientX/event.clientY 定位，并绑定点击、键盘导航等逻辑。它和原生菜单无继承、无样式共享、无快捷键联动（比如 Ctrl+C 不会自动触发你写的“复制”项）。
- 必须手动处理右键坐标偏移（尤其页面有滚动时，要用
e.pageX/e.pageY而非clientX） - 菜单元素需设
position: fixed或动态计算top/left，否则可能被父容器裁剪 - 要支持键盘操作（
ArrowDown、Enter、Escape），得自己监听keydown并管理焦点 - 每次右键都应销毁前一次菜单（避免残留多个
div），或复用单个实例并更新位置/内容
常见混淆点：menu 和 menuitem 标签已废弃
HTML5 曾引入 <menu> 和 <menuitem> 试图标准化上下文菜单，但所有主流浏览器均已弃用（Chrome 82+、Firefox 84+ 移除支持）。现在写 <menu type="context"> 不会触发任何右键行为，也不影响 contextmenu 事件流。
立即学习“前端免费学习笔记（深入）”；
- MDN 明确标注
menuitem为“Deprecated”且“Non-standard” - 使用这些标签既不生效，还可能干扰无障碍读取（screen reader 会误读为导航结构）
- 替代方案只有纯 JS 实现：监听
contextmenu→ 创建div→ 插入带data-action的button或li→ 绑定点击回调
真正难点不在“画出来”，而在边界处理：右键靠近视口边缘时菜单是否自动翻转方向？失焦时如何安全关闭？iframe 内部右键如何透传或隔离？这些细节没标准解法，全靠业务场景反复调试。
