contextmenu属性仅用于关联已弃用的元素，实际自定义右键菜单需监听contextmenu事件并调用preventDefault()，再动态创建带语义化ARIA属性的绝对定位DOM菜单。
contextmenu 属性本身不触发自定义菜单，只是控制默认行为
很多人以为给元素加 contextmenu="my-menu" 就能弹出自定义右键菜单——其实不是。HTML 的 contextmenu 全局属性**仅用于关联一个 元素的 id**，且该特性在主流浏览器中早已被弃用或从未实现（Chrome、Firefox、Edge 均不支持渲染该 ）。真正起作用的是 contextmenu 事件 + event.preventDefault()。
所以第一步必须明确：要实现自定义右键菜单，你得监听 contextmenu 事件，并阻止默认行为。
-
contextmenu属性（如contextmenu="xxx"）目前可安全忽略，它不会带来任何实际效果 - 浏览器对
的原生支持已基本消失，不要依赖它 - 所有现代实现都基于 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 并管理生命周期
自定义菜单本质是一个绝对定位的 右键菜单不是核心功能，但一旦做错，可能让整个元素无法响应右键——比如忘记 最常被忽略的一点：菜单 DOM 插入位置。不要直接
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 判断）role="menu"、role="menuitem" 及键盘导航逻辑（ArrowUp/ArrowDown、Enter）
contextmenu 事件默认不穿透，需在 slot 或 host 元素上显式监听appendChild 到 body 就完事——若 body 有 transform 或 overflow: hidden，菜单会被裁剪或偏移。稳妥做法是插入到离目标元素最近的、具有 position: relative 或 position: static 且无裁剪的祖先节点下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
