禁用默认右键菜单需在 contextmenu 事件同步调用 event.preventDefault()，绑定 addEventListener 并确保所有分支覆盖；坐标计算应基于 getBoundingClientRect() 叠加 scroll 值；菜单关闭后须显式移除并用 focus({preventScroll: true}) 恢复焦点；menu/menuitem 标签已废弃，须用 role="menu" 等 ARIA 属性实现无障碍。
如何禁用默认右键菜单并挂载自定义逻辑
直接调用 event.preventDefault() 是触发自定义菜单的前提，否则浏览器会叠加显示原生菜单。这个操作必须在 contextmenu 事件监听中执行，且不能延迟到异步回调里（比如 setTimeout 或 Promise.then）——一旦事件流结束，禁用就失效了。
常见错误是把 preventDefault() 写在条件判断外层但逻辑没覆盖所有分支，或者绑定了多次监听器却只在其中一个里调用它，导致部分右键仍弹出原生菜单。
- 监听必须用
addEventListener('contextmenu', handler, { capture: false })，不推荐用oncontextmenu属性，不利于解耦和动态控制 - 若页面有 iframe，需分别对其
contentDocument绑定，父页监听无法捕获 iframe 内部的右键事件 - 移动端 Safari 对
contextmenu支持不稳定，iOS 15+ 才真正可用；Android Chrome 一般没问题
定位自定义菜单 DOM 元素的正确坐标
右键坐标不是简单取 event.clientX / clientY 就完事。滚动偏移、缩放（transform: scale()）、iframe 嵌套、fixed 定位容器都会让绝对定位偏移。
最稳妥的方式是基于 event.composedPath()[0] 获取触发元素，再用 getBoundingClientRect() 计算相对视口位置，最后叠加滚动值：window.scrollX 和 window.scrollY。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 避免直接用
event.pageX / pageY：在有横向滚动或 CSS transform 的页面中，它们可能失真 - 如果菜单要相对于某个容器（如表格行）展开，需用
element.getBoundingClientRect()转换为该容器坐标系，而不是一律用视口坐标 - 高 DPI 屏幕下注意
window.devicePixelRatio不影响坐标计算，但会影响菜单内图标渲染清晰度
菜单项点击后如何可靠关闭并恢复焦点
用户点完菜单项，菜单 DOM 必须显式 remove() 或设 display: none，否则残留 DOM 可能拦截后续点击或键盘事件。更关键的是焦点管理——右键前的聚焦元素（比如输入框）往往被忽略，导致快捷键或 Tab 导航中断。
- 在
contextmenu触发时，先用document.activeElement缓存当前焦点元素（注意过滤body或html） - 菜单关闭后，用
el.focus({ preventScroll: true })恢复焦点，加preventScroll防止意外滚动 - 不要依赖
blur()后自动回到上一个焦点，浏览器行为不一致；尤其在 Shadow DOM 内需额外处理delegatesFocus
为什么 menuitem 元素和 <menu> 标签基本不能用
<menu type="context"> 和 <menuitem> 是 HTML5 曾提议但已被主流引擎弃用的标签。Chrome 自 89 版起完全移除支持，Firefox 仅保留极简解析但不渲染为右键菜单，Safari 从未实现。W3C 已将它们标记为“obsolete”。
这意味着哪怕你写对了结构，也只会当普通不可见元素处理，不会响应右键、不触发任何菜单逻辑、不参与 ARIA 语义识别。
- 别浪费时间调试
contextmenu属性绑定到<menu>上——它只对原生菜单有效，而原生菜单现在根本不读这个 - 无障碍支持必须靠
role="menu"+role="menuitem"+ 正确的aria-haspopup和aria-expanded动态控制 - 想省事用现成方案？
@floating-ui/dom比手写定位稳定，但依然得自己处理事件流和焦点链
真正麻烦的从来不是画个菜单框，而是事件捕获时机、坐标转换边界、焦点生命周期这三者的组合问题。任一环节错位，就会出现“点了没反应”“菜单闪一下就消失”“按 Esc 不关闭”“键盘导航跳过菜单项”这类问题。
