HTML结构中Menu与Menuitem标签在自定义右键菜单中的应用尝试-html教程-PHP中文网

html原生和标签已被主流浏览器弃用，无法实现右键菜单功能；应使用配合及完整键盘导航逻辑手动实现。

html结构中menu与menuitem标签在自定义右键菜单中的应用尝试

HTML 原生没有 <menu></menu> 和 <menuitem></menuitem> 标签的实际支持，浏览器已弃用且无法可靠用于自定义右键菜单。

为什么 `<menu></menu>` 和 `<menuitem></menuitem>` 不能用

这两个标签曾是 HTML5 的实验性提案，但从未被主流浏览器真正实现。Chrome 从 58 版起完全移除了 <menuitem></menuitem> 支持，Firefox 也早在 2019 年废弃并禁用渲染逻辑。即使写出来，<menuitem></menuitem> 不会显示、不响应点击、不触发事件，<menu></menu> 仅被当作普通 <div> 处理（无语义、无样式、无行为）。 <p>常见错误现象包括：</p> <ul> <li>右键后菜单完全不出现，控制台无报错但 DOM 中元素存在</li> <li>元素可见但 <code>click 事件监听失效（因为浏览器不将其视为可交互节点）

使用 role="menu" + role="menuitem" 后仍无法键盘导航（缺少底层 ARIA 行为绑定）

替代方案：用

<div> + ARIA 实现可访问右键菜单
<p>实际可行的做法是用语义化结构模拟菜单行为，核心是正确设置 ARIA 属性和键盘交互逻辑：</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<ul><li>外层容器用 <code><div role="menu">，并添加 <code>tabindex="-1"

以便程序聚焦

每个选项用 <button role="menuitem"></button>（不用

<div>，否则无法空格/回车触发）
<li>必须手动监听 <code>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>