contextmenu事件需在捕获或目标阶段显式调用event.preventDefault()和stopImmediatePropagation()阻止原生菜单，监听须绑定到具体元素（含shadowRoot），坐标计算要修正滚动偏移与窗口边界，菜单需手动管理焦点、ESC关闭、点击外部隐藏及无障碍支持。
contextmenu 事件默认行为必须显式阻止
不调用 event.preventDefault()，浏览器会照常弹出原生右键菜单，自定义菜单根本不会出现。这个阻止动作必须在事件监听器里做，而且不能依赖冒泡阶段——得在捕获或目标阶段就处理。
- 监听要绑定到具体触发区域，比如
document或某个<div id="editor">，而不是只绑在 <code>body上还指望它覆盖所有子元素 - 如果目标元素是
contenteditable或iframe，事件可能不会冒泡上来，得单独给它们加监听 - 移动端没有 contextmenu 事件，别指望这套逻辑在手机上生效
- 菜单容器需设
position: absolute，并用style.left和style.top动态赋值 - 要检查右键位置是否靠近窗口边缘，否则菜单可能被裁切：比如
left + menuWidth > window.innerWidth时，把 left 改成window.innerWidth - menuWidth - 避免用
getBoundingClientRect()算点击点，它返回的是相对于视口的值，但和clientX/Y本质一致，没必要绕路 - 菜单元素插入后，立即调用
menuElement.focus()（前提是它有tabindex="0"） - 监听
document.addEventListener('click', hideMenu)，但要在菜单元素的click事件里event.stopPropagation()，否则点菜单项会立刻触发隐藏 - 按 ESC 键关闭菜单：监听
document.addEventListener('keydown', e => e.key === 'Escape' && hideMenu()) - 菜单项用
<button></button>而不是<div>，天然支持空格/回车触发，也利于无障碍访问<h3>兼容性注意：Firefox 对禁用右键更敏感</h3> <p>Firefox 在某些场景下（比如选中文本后右键），即使调用了 <code>preventDefault()，仍可能漏出原生菜单。这不是 bug，是它的安全策略——它允许用户始终能“查看页面源代码”或“检查元素”，除非页面明确声明了oncontextmenu="return false"属性（但该写法已过时且不推荐）。立即学习“前端免费学习笔记（深入）”；
- 稳妥做法是：在
contextmenu监听器里，除了preventDefault()，再加一句event.stopImmediatePropagation() - 不要在全局
document上无条件禁用 contextmenu，否则开发者工具的“审查元素”可能失效，调试时很痛苦 - 若页面含 Web Components（如 Shadow DOM），contextmenu 事件默认不穿透，需在 shadowRoot 上显式监听
实际交互中，最易被忽略的是菜单与滚动容器的相对关系——当右键发生在带
overflow: auto的 div 内部时，坐标得减去该容器的scrollTop/scrollLeft，否则菜单会飘在错误位置。这点没文档强调，但一上线就暴露。 - 稳妥做法是：在
右键坐标要用 event.clientX / event.clientY 计算位置
自定义菜单 DOM 元素需要绝对定位，靠 event.clientX 和 event.clientY 算出屏幕坐标，再结合 scrollX/scrollY 修正滚动偏移。别用 pageX/pageY，它们在缩放或 iframe 场景下不可靠。
菜单 DOM 要手动管理显示/隐藏与焦点
右键菜单不是模态框，浏览器不会自动聚焦或拦截 Tab 键。你得自己处理键盘导航、ESC 关闭、点击外部关闭、以及防止菜单自身触发新的 contextmenu。
