在javascript中，contextmenu事件用于捕获右键点击，需调用event.preventdefault()阻止默认菜单，再结合clientx/y与滚动偏移定位自定义菜单，并通过document点击、esc键等方式可靠关闭，兼顾移动端兼容与无障碍支持。
在JavaScript中，contextmenu事件用于捕获用户右键点击行为。默认会触发浏览器原生右键菜单，要实现自定义右键菜单，关键在于阻止默认行为并手动显示自定义UI。
监听 contextmenu 事件并阻止默认菜单
右键触发时，浏览器会立即弹出原生菜单。必须在事件处理函数中调用 event.preventDefault()，否则自定义菜单还没出现，原生菜单就已覆盖。
- 推荐使用
addEventListener绑定，避免内联事件带来的维护问题 - 注意事件冒泡：如果父容器也监听了 contextmenu，需合理控制 stopPropagation（视需求而定）
- 仅对目标元素监听，避免全局拦截影响其他区域（如输入框、链接等可能仍需原生菜单）
获取鼠标位置并定位自定义菜单
自定义菜单需跟随鼠标出现，要用 event.clientX / event.clientY 获取屏幕坐标，再结合页面滚动偏移（window.scrollX/Y）计算绝对位置。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 避免直接用
pageX/pageY，它在某些滚动场景下可能不准 - 菜单 DOM 元素建议初始设为
display: none，触发时动态设置left和top并显示 - 做简单边界检测：若靠近右/下边缘，可向左或向上偏移，防止菜单被裁切
关闭自定义菜单的几种可靠方式
右键菜单不能“悬空”，需提供明确的关闭逻辑：
- 点击页面其他区域：监听 document 的 click 或 mousedown，判断是否点击在菜单外部
- 按 Esc 键关闭：监听 keydown，检查 keyCode === 27
- 鼠标移出并延迟关闭（可选）：适用于需要 hover 交互的菜单，但需谨慎避免误关
注意事项与兼容性提醒
虽然 contextmenu 事件现代浏览器支持良好，但仍需留意细节：
- 移动端没有右键概念，contextmenu 不会触发；如需长按模拟，需额外实现 touchstart + setTimeout
- 部分浏览器（如旧版 Safari）对 preventDefault 在 contextmenu 中的支持较晚，建议加简单兼容判断
- 无障碍访问（a11y）：自定义菜单需添加 role="menu"、aria-haspopup 等属性，并支持键盘导航（↑↓EnterEsc）
不复杂但容易忽略：真正让自定义右键菜单可用的，不是画得多漂亮，而是拦截及时、定位准确、关闭可靠、体验一致。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
