必须禁用默认右键菜单并手动实现：绑定contextmenu事件并调用preventDefault()，用clientX/clientY定位并处理边界，复用DOM节点，通过click/keydown关闭，注意z-index与pointer-events。
浏览器默认右键菜单无法满足业务需求时，必须禁用默认行为并手动实现——但直接 contextmenu 监听 + event.preventDefault() 只是起点，真正卡住人的地方在定位、事件穿透和生命周期管理。
怎么监听右键并阻止默认菜单
核心就两步：绑定 contextmenu 事件，立刻调用 event.preventDefault()。不加这句，自定义菜单会和原生菜单一起弹出；加了但没加 event.stopPropagation()，父级监听可能误触发。
常见错误现象：contextmenu 事件绑在子元素上，但点击空白处不触发——因为事件没冒泡到监听节点；或菜单一闪而逝，其实是 click 或 blur 导致 DOM 被意外移除。
- 监听建议写在目标容器上（如
document.getElementById('app')），而非每个可右键元素单独绑 - 务必检查
event.button === 2（部分旧浏览器中左键也可能触发contextmenu） - 不要在
contextmenu回调里直接操作 DOM 样式显示菜单，先创建/复用节点再定位
怎么让菜单精准出现在鼠标位置
用 event.clientX 和 event.clientY 计算坐标最可靠；pageX/pageY 在滚动页面时容易偏移，offsetX/offsetY 则依赖目标元素的 position 上下文，不稳定。
立即学习“前端免费学习笔记（深入）”；
实际定位要处理边界：菜单不能超出视口。需对比 window.innerWidth / window.innerHeight，动态调整 left 或 top 值。
- 菜单
position必须为fixed或absolute，fixed更简单（不受父级transform影响） - 避免用
top: event.clientY + 'px'粗暴赋值，先计算菜单宽高：menu.offsetWidth、menu.offsetHeight - 移动端慎用：iOS Safari 的
contextmenu支持极差，基本不可靠
怎么处理菜单项点击和关闭逻辑
菜单本身是临时 DOM，点击菜单项后必须主动隐藏，否则下次右键会叠加多个菜单实例。关闭方式不止一种：点击菜单项、点击页面其他区域、按 Esc 键。
关键陷阱：用 document.addEventListener('click', handler) 关闭菜单时，会立即触发（因为右键后紧接着有隐式 focus 变化），必须用 setTimeout 延迟 0 帧，或改用 mousedown + event.target 判断是否在菜单外。
- 菜单项绑定
click时，记得event.stopPropagation()，防止冒泡触发外部关闭逻辑 -
Esc关闭用keydown监听，判断event.key === 'Escape'，别用keyCode（已废弃） - 菜单 DOM 建议复用：每次右键只修改内容与坐标，不反复
innerHTML = ''再重建，减少重排
最易被忽略的是 z-index 层级和 pointer-events 配合。菜单弹出后，若背景内容仍可交互，要么给遮罩层，要么确保菜单父容器 pointer-events: none 且菜单自身 pointer-events: auto——否则鼠标划过菜单边缘可能触发底层元素的 hover 效果，视觉上极其诡异。
