真正可用的自定义右键菜单必须用 JavaScript 监听 contextmenu 事件并同步调用 preventDefault()，动态创建 DOM、挂载到 document.body、按坐标定位，且需处理 iframe/Shadow DOM/移动端等边界场景。
直接在 HTML 中写 contextmenu 属性或用 <menu></menu> 标签，无法实现真正可用的自定义右键菜单——浏览器只把它当语义占位符，不渲染、不响应、不联动事件。
为什么 contextmenu 属性加了也没反应
HTML5 确实定义了 contextmenu 全局属性（如 <div contextmenu="my-menu">），也允许配 <code><menu type="context"></menu>，但所有主流浏览器（Chrome/Firefox/Safari/Edge）至今（2026年5月）都未实现该规范。它不会自动绑定事件、不会阻止原生菜单、也不会定位显示。
- 检查 DevTools 的 Elements 面板，你会发现即使写了
contextmenu="xxx"，DOM 上也无实际作用 -
<menu type="context"></menu>会被解析为普通块级元素，样式默认是display: block，不是弹出式菜单 - 试图靠 CSS 的
visibility: hidden或display: none控制显隐，完全绕不开contextmenu事件监听这个前提
contextmenu 事件必须手动绑定，且不能靠 HTML 属性
真正起效的唯一路径是 JavaScript 监听 contextmenu 事件，并在回调中同步调用 event.preventDefault()。内联写法如 oncontextmenu="return false" 不可靠，也不支持事件选项（如 { once: true }）。
- 推荐用
addEventListener('contextmenu', handler, { capture: false })绑定到具体目标元素（如document.getElementById('editor')） - 若需全局生效，绑定到
document，但务必用e.target.matches('.safe-area')过滤，避免拦掉<input>的粘贴等刚需操作 - 绝对不要在
mousedown或click里调preventDefault()——它对右键菜单无效
菜单 DOM 必须动态创建并挂到 document.body
静态写在 HTML 里的 <menu></menu> 或 <div class="menu"> 节点，无法响应右键位置、滚动偏移和边界检测。它得是 JS 创建、按需挂载、动态定位的临时节点。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>每次右键时复用已有 <code>menuEl 更高效，而不是反复 innerHTML = '' 重建
document.body.appendChild(menuEl)，否则可能被父容器的 overflow: hidden 或 transform 截断event.clientX/event.clientY + window.scrollX/window.scrollY，别用 getBoundingClientRect()（滚动时不准）position: absolute 或 position: fixed，且 z-index 要足够高（如 9999）移动端和 iframe 是最常漏掉的失效点
不是代码写错了，而是作用域根本不在你的监听范围内。iOS Safari 对 contextmenu 支持仍不稳定（仅 iOS 16+ 基本可用），而 iframe 和 Shadow DOM 天然隔离事件流。
- iframe 内右键：必须在其
contentDocument上单独监听，主页面的document.addEventListener完全收不到 - Shadow DOM：确保宿主元素启用
mode: "open"，并在其shadowRoot上绑定，而非宿主元素本身 - 移动端真要兼容：放弃
contextmenu，改用touchstart+setTimeout模拟长按，同时禁用-webkit-user-select: none
最易被忽略的不是“怎么画菜单”，而是“谁来管它的生和死”：preventDefault 必须同步、菜单必须挂 body、关闭逻辑要覆盖 ESC/外部点击/滚动/焦点切换，缺一环就卡住或闪退。
