HTML原生<menu>和<menuitem>标签已被主流浏览器弃用，无法实现右键菜单功能；应使用<div role="menu">配合<button role="menuitem">及完整键盘导航逻辑手动实现。
HTML 原生没有 <menu> 和 <menuitem> 标签的实际支持，浏览器已弃用且无法可靠用于自定义右键菜单。
为什么 <menu> 和 <menuitem> 不能用
这两个标签曾是 HTML5 的实验性提案，但从未被主流浏览器真正实现。Chrome 从 58 版起完全移除了 <menuitem> 支持，Firefox 也早在 2019 年废弃并禁用渲染逻辑。即使写出来，<menuitem> 不会显示、不响应点击、不触发事件，<menu> 仅被当作普通 <div> 处理（无语义、无样式、无行为）。
常见错误现象包括：
- 右键后菜单完全不出现，控制台无报错但 DOM 中元素存在
- 元素可见但
click事件监听失效（因为浏览器不将其视为可交互节点） - 使用
role="menu"+role="menuitem"后仍无法键盘导航（缺少底层 ARIA 行为绑定）
替代方案：用 <div> + ARIA 实现可访问右键菜单
实际可行的做法是用语义化结构模拟菜单行为，核心是正确设置 ARIA 属性和键盘交互逻辑：
立即学习“前端免费学习笔记（深入）”；
- 外层容器用
<div role="menu">，并添加tabindex="-1"以便程序聚焦 - 每个选项用
<button role="menuitem">（不用<div>，否则无法空格/回车触发） - 必须手动监听
contextmenu阻止默认行为，并计算鼠标位置定位菜单 - 需实现上下方向键切换焦点、
Escape关闭、Enter/Space触发操作
示例关键片段：
<div id="ctx-menu" role="menu" tabindex="-1"> <button role="menuitem" data-action="copy">复制</button> <button role="menuitem" data-action="delete">删除</button> </div>
兼容性与性能注意点
原生 <menu> 标签在现代项目中没有任何兼容性优势，反而会误导团队成员以为它是“标准方案”。真实项目中应关注：
- IE11 已不支持任何
<menuitem>行为，连基础渲染都没有 - 用
display: none控制菜单显隐比用hidden属性更可控（避免 SSR 渲染异常） - 频繁右键时，每次动态创建 DOM 比复用隐藏节点更消耗性能；建议初始化时挂载一次，用
transform+opacity控制显示 - 移动端没有右键事件，
contextmenu在 iOS Safari 中默认被忽略，需配合longpresspolyfill
真正要落地的右键菜单，得靠手写事件流 + ARIA 状态管理 + 位置计算，而不是寄希望于被废弃的标签。最易被忽略的是键盘导航闭环——很多人加了 role 却忘了处理 ArrowDown 时的焦点转移逻辑，导致屏幕阅读器用户完全无法操作。
