阻止默认右键事件需监听contextmenu并调用event.preventDefault()，绑定到document或目标容器；定位菜单用clientX/clientY并处理视口边界；推荐position:fixed避免父级transform干扰；需监听点击外部、Esc键、滚动等关闭场景。
阻止默认右键事件用 event.preventDefault()
右键菜单要替换成自定义的，第一步就是让浏览器别弹出原生菜单。核心操作是监听 contextmenu 事件并立刻调用 event.preventDefault()，否则后续所有 DOM 操作都白搭。
常见错误是只在某个元素上监听，结果用户在空白区域或子元素上右键时仍触发默认菜单。正确做法是绑定到目标容器（比如 document 或具体模块根节点），并确保事件能捕获到所有右键动作：
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
// 后续显示自定义菜单逻辑
});注意：如果页面有 iframe，iframe 内部需单独处理；Vue/React 等框架中，要在组件挂载后绑定、卸载前解绑，避免内存泄漏。
定位自定义菜单用 event.clientX 和 event.clientY
浏览器原生菜单位置由鼠标坐标决定，自定义菜单也得对齐这个逻辑。不能用 event.pageX/pageY，因为它们受页面滚动影响，而 clientX/clientY 是视口坐标，更稳定可靠。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
clientX/clientY值是相对于浏览器窗口左上角的，菜单position: absolute时直接赋值即可 - 需检查是否超出视口右/下边界，否则菜单会被裁剪。简单做法是取
Math.min(clientX, window.innerWidth - menuWidth) - 移动端没有右键事件，
contextmenu在 iOS Safari 中默认被禁用，无法触发——这点容易被忽略
菜单 DOM 结构建议用 position: fixed 而非 absolute
用 absolute 定位时，若父容器有 transform、perspective 或 filter，会创建新的定位上下文，导致菜单偏移。这是高频坑点。
更稳妥的做法是把菜单挂到 document.body 下，并设为 position: fixed：
<div id="custom-menu" style="position:fixed; display:none;"> <button class="menu-item">复制</button> <button class="menu-item">删除</button> </div>
这样它完全脱离文档流，不受任何祖先样式干扰，且 clientX/clientY 可直接映射为 left/top 值。
关闭菜单的几种触发方式必须覆盖全
用户不会只靠点击菜单项来收起菜单，以下场景都得监听：
- 点击菜单外部区域（监听
document.click，但要排除菜单自身和触发源） - 按
Escape键（监听keydown，判断e.key === 'Escape'） - 滚动页面时自动隐藏（监听
scroll，尤其在长列表中很必要） - 鼠标移出菜单后延迟关闭（可选，但需防误触）
特别注意：多个自定义菜单共存时（比如表格行级菜单 + 全局菜单），要用唯一 ID 或 data 属性区分作用域，避免互相干扰。
菜单本身是浮层，z-index 必须足够高，但也不宜无脑设 9999——和 Modal、Tooltip 等其他浮层的层级关系得提前规划好。
