HTML5 的 <menu> 标签已废弃，无法用于右键菜单；必须用 JavaScript 拦截 contextmenu 事件并动态创建 DOM 元素实现，同时需增强可访问性与边界处理。
HTML5 的 <menu> 标签已废弃，不能用于定义右键菜单或命令列表。 它在现代 HTML 标准中（HTML5.2 及以后）已被移除，浏览器也不支持其语义化菜单行为。所谓“右键菜单”必须通过 JavaScript 拦截 contextmenu 事件并动态创建 DOM 元素来实现。
为什么不能用 <menu> 标签做右键菜单
早期 HTML5 草案中曾引入 <menu type="context">，但该特性从未被主流浏览器实现，且在 HTML Living Standard 中已被明确废弃。当前所有浏览器（Chrome、Firefox、Safari、Edge）均忽略 <menu> 的 type="context" 属性，也不会将其关联到右键操作。
正确实现右键菜单的步骤
使用原生 DOM + 事件监听 + 动态元素构建轻量右键菜单：
- 阻止默认右键行为：
event.preventDefault() - 计算鼠标位置，动态创建
<div class="context-menu">并设置position: absolute - 插入带点击功能的菜单项（如
<button>或<div role="menuitem">） - 点击菜单项后执行对应逻辑，并自动隐藏菜单
- 点击菜单外区域或按
Esc键时关闭菜单
一个最小可用示例
以下代码不依赖框架，仅用原生 JS 实现基础右键菜单：
立即学习“前端免费学习笔记（深入）”；
<div id="target" style="padding: 20px; background: #f5f5f5;">
右键点击我
</div>
<div id="contextMenu" class="context-menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.15); min-width:160px; z-index:1000;">
<div class="menu-item" data-action="copy">复制</div>
<div class="menu-item" data-action="delete">删除</div>
</div>
<script>
const target = document.getElementById('target');
const menu = document.getElementById('contextMenu');
target.addEventListener('contextmenu', (e) => {
e.preventDefault();
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
menu.style.display = 'block';
});
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', function() {
const action = this.dataset.action;
console.log('执行操作：', action);
menu.style.display = 'none';
});
});
document.addEventListener('click', () => menu.style.display = 'none');
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') menu.style.display = 'none';
});
</script>
增强可用性与可访问性的建议
真实项目中应补充以下细节：
- 为菜单容器添加
role="menu"，菜单项添加role="menuitem"和tabindex="0" - 支持键盘导航：用
↑/↓切换焦点，Enter触发，Esc关闭 - 避免菜单出现在屏幕边缘外：检查
e.pageX / e.pageY并做边界修正 - 多个触发区域共用同一菜单时，用
data-context-for等属性区分上下文
