JavaScript实现右键自定义菜单需阻止contextmenu默认行为，基于clientX/Y定位绝对定位的div菜单，插入body并管理点击关闭、键盘导航及数据驱动渲染。
JavaScript 实现右键自定义上下文菜单，核心是阻止浏览器默认右键菜单（contextmenu 事件），再基于鼠标位置动态显示一个自定义的 <div> 菜单，并处理点击响应。关键在于事件监听、定位控制和生命周期管理。
监听右键并阻止默认行为
在目标元素或整个页面上监听 contextmenu 事件，调用 event.preventDefault() 拦截原生菜单：
- 推荐绑定到具体容器（如
#editor），避免全局干扰表单控件、输入框等需要原生右键的场景 - 注意：移动端无右键概念，该功能仅适用于桌面端；可加
if ('ontouchstart' in window) return提前退出 - 事件对象中
event.clientX和event.clientY提供鼠标坐标，用于后续菜单定位
动态创建并定位菜单 DOM
菜单建议用绝对定位的 <div class="custom-menu">，内部用 <button> 或 <div role="menuitem"> 构建选项：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
style.left = (e.clientX + offsetX) + 'px'和style.top = (e.clientY + offsetY) + 'px'设置位置，避免菜单被屏幕边缘裁剪（可加边界检测逻辑） - 菜单插入到
document.body，确保层级最高；配合z-index: 9999和position: absolute - 菜单需设置
tabindex="-1"并手动管理键盘导航（如上下键切换焦点，Enter 触发）以满足基础可访问性
点击外部自动关闭菜单
菜单显示后，需监听一次性的全局点击事件来关闭它，防止重复绑定：
立即学习“Java免费学习笔记（深入）”；
- 使用
document.addEventListener('click', closeMenu, { once: true })是简洁做法 - 更稳妥的方式是监听
mousedown，并在事件捕获阶段判断点击是否在菜单或触发元素内，否则关闭 - 记得在菜单打开时移除旧的关闭监听器，或每次打开前先清理（如用变量存 handler 引用）
菜单项交互与数据驱动
不要硬编码 HTML 字符串，推荐用数据数组生成菜单项，提升可维护性：
- 例如：
const menuItems = [{ label: '复制', action: () => copyText(), disabled: !hasSelection }] - 渲染时遍历生成
<button>，绑定data-index或闭包函数，点击直接执行对应操作 - 支持分组（
type: 'separator'）、图标（通过 class 或data-icon）、禁用态（disabled属性 + CSS 灰色样式）
