原生 contextmenu 属性必须配合同名且 type="context" 的顶层 元素才生效，但 safari 不支持，实际项目需用 js 拦截 contextmenu 事件并自定义 dom 菜单。
contextmenu 属性本身不生效，必须配合
直接给元素写 contextmenu="my-menu" 不会弹出菜单——浏览器根本不会识别这个属性，除非你同时定义了同名的 <menu type="context"></menu> 元素，且其 id 与属性值完全匹配。这是最常被忽略的前提。
常见错误现象：contextmenu 属性写了，右键还是系统默认菜单；检查 DOM 发现 <menu></menu> 缺失、id 拼错、或没加 type="context"。
-
<menu></menu>必须是全局作用域下的顶层元素（不能嵌套在其他交互组件内），且只能有一个type="context" -
id区分大小写，contextmenu="MyMenu"和<menu id="mymenu"></menu>不匹配 - Chrome 和 Firefox 支持良好，但 Safari 目前（v17+）仍不支持
<menu type="context"></menu>，实际项目中需降级处理
menu 元素里只能用 或
<command></command> 是原始规范推荐，但已被所有现代浏览器弃用；<menuitem></menuitem> 曾短暂替代，现在也标记为“deprecated”。目前唯一可行的兼容写法是用 <menu></menu> 包裹普通 <button></button> 或 <span></span>，再靠 CSS 和 JS 控制显示逻辑——也就是说，原生 contextmenu 属性 + <menu></menu> 的组合在实际生产中基本不可用。
使用场景：仅适合演示或内部工具（可接受 Safari 不支持）；真实产品必须用 JS 拦截 contextmenu 事件 + 绝对定位 DOM 菜单。
- 不要写
<menuitem label="复制"></menuitem>—— 大部分浏览器会忽略，控制台报 warning - 若强行用
<button></button>嵌套在<menu></menu>中，它不会自动获得点击响应，仍需绑定 JS 事件 - 原生菜单不支持图标、子菜单、禁用态等基础功能，扩展性为零
真正可靠的方案：用 event.preventDefault() + 自定义 DOM 菜单
监听 contextmenu 事件，调用 event.preventDefault() 阻止默认行为，再动态创建一个 <div class="custom-menu"> 并定位到 <code>event.clientX/event.clientY。这是当前唯一跨浏览器稳定运行的方式。
性能影响小，但要注意几个关键点：
- 菜单容器必须设
position: absolute和z-index，否则可能被遮挡 - 右键坐标需考虑页面滚动偏移：
top: event.pageY - window.scrollY更稳妥 - 点击菜单外区域要关闭菜单，通常监听
document.click，但需排除菜单自身和触发元素 - 键盘支持（如按 Esc 关闭）容易被忽略，但对无障碍很重要
为什么别依赖 oncontextmenu HTML 属性
<div oncontextmenu="showMenu(event)"> 看似简单，但存在隐性问题：内联 handler 无法被 <code>event.preventDefault() 正确拦截（尤其在某些嵌套场景下），且不利于事件委托和状态管理。
更合理的做法是统一用 JS 添加事件监听：
element.addEventListener('contextmenu', (e) => {
e.preventDefault();
renderCustomMenu(e.clientX, e.clientY);
});
这样能清晰控制阻止时机、复用逻辑、方便测试。如果多个元素共用同一菜单，优先用事件委托绑定到父容器，而非每个元素单独监听。
复杂点在于菜单的生命周期管理——打开、关闭、焦点切换、键盘导航、焦点逃逸处理，这些都不是加个 contextmenu 属性就能解决的。
