contextmenu属性仅用于关联已弃用的元素，实际自定义右键菜单需监听contextmenu事件并调用preventDefault()，再动态创建带语义化ARIA属性的绝对定位DOM菜单。
contextmenu 属性本身不触发自定义菜单，只是控制默认行为
很多人以为给元素加 contextmenu="my-menu" 就能弹出自定义右键菜单——其实不是。HTML 的 contextmenu 全局属性**仅用于关联一个 <menu type="context"></menu> 元素的 id**，且该特性在主流浏览器中早已被弃用或从未实现（Chrome、Firefox、Edge 均不支持渲染该 <menu></menu>）。真正起作用的是 contextmenu 事件 + event.preventDefault()。
所以第一步必须明确：要实现自定义右键菜单，你得监听 contextmenu 事件，并阻止默认行为。
-
contextmenu属性（如contextmenu="xxx"）目前可安全忽略，它不会带来任何实际效果 - 浏览器对
<menu type="context"></menu>的原生支持已基本消失，不要依赖它 - 所有现代实现都基于 JavaScript 拦截事件 + 动态创建 DOM 菜单
监听 contextmenu 事件并阻止默认右键菜单
这是整个流程的起点。必须在目标元素（或其父容器）上监听 contextmenu，并在回调中调用 event.preventDefault()，否则系统默认菜单仍会弹出。
常见错误是只监听 click 或漏掉 preventDefault，导致菜单闪一下又消失，或和系统菜单叠加。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 推荐在捕获阶段监听（
useCapture = true），避免被子元素的stopPropagation阻断 - 注意移动端没有右键概念，
contextmenu在 iOS Safari 和部分 Android 浏览器中默认不触发（需额外处理长按模拟） - 如果菜单需要定位，用
event.clientX/event.clientY，而非pageX/pageY（后者受滚动影响）
element.addEventListener('contextmenu', (e) => {
e.preventDefault();
showCustomMenu(e.clientX, e.clientY);
}, true);
动态创建菜单 DOM 并管理生命周期
自定义菜单本质是一个绝对定位的 <div> 或 <code><ul></ul>，内容由 JS 动态生成。关键不在“画出来”，而在“收得干净”。
- 每次右键应销毁前一个菜单实例，避免内存泄漏和重复显示
- 菜单容器需设
position: absolute、z-index足够高，并禁用文本选中（user-select: none） - 必须监听
click外的关闭时机：点击文档空白处（document.addEventListener('click', closeMenu)）、ESC 键（keydown监听event.key === 'Escape'）、窗口失焦（blur） - 菜单项建议用
data-action属性标记行为，而不是内联onclick，便于统一事件委托和测试
兼容性与降级要点：别让右键变“失灵”
右键菜单不是核心功能，但一旦做错，可能让整个元素无法响应右键——比如忘记 preventDefault 导致菜单闪烁后失效，或未清理事件监听器导致多次绑定。
- 在无
contextmenu支持的环境（如旧版 IE），可 fallback 到长按 500ms 触发（用setTimeout+mousedown/mouseup判断） - 屏幕阅读器用户依赖右键菜单的语义结构，若完全替换为
<div> 菜单，需补全 <code>role="menu"、role="menuitem"及键盘导航逻辑（ArrowUp/ArrowDown、Enter） - 如果页面有 Shadow DOM，
contextmenu事件默认不穿透，需在slot或 host 元素上显式监听
最常被忽略的一点：菜单 DOM 插入位置。不要直接 appendChild 到 body 就完事——若 body 有 transform 或 overflow: hidden，菜单会被裁剪或偏移。稳妥做法是插入到离目标元素最近的、具有 position: relative 或 position: static 且无裁剪的祖先节点下。
