禁用默认右键菜单必须在 contextmenu 事件中调用 event.preventdefault()，绑定到目标或 document 并用事件委托；移动端需单独处理长按；菜单应挂载 body 下，用 requestanimationframe 延迟定位，支持 esc 关闭、键盘导航及无障碍访问。
如何禁用默认右键菜单并挂载自定义逻辑
直接调用 event.preventDefault() 是唯一可靠方式，否则浏览器会照常弹出原生菜单。必须在 contextmenu 事件监听中执行，且不能延迟到其他事件（比如 mousedown）里处理——因为 contextmenu 事件本身可被取消，而其他事件无法阻止它。
常见错误是只监听 click 或 mousedown 并试图在那里 preventDefault，这完全无效；也有人用 CSS 的 pointer-events: none 挡右键，结果连自定义逻辑都触发不了。
- 必须绑定在目标元素或其祖先上，推荐用事件委托到
document，再用event.target判断是否命中业务区域 - 移动端不触发
contextmenu，需单独处理长按（touchstart+ 定时器） - 若页面有 iframe，iframe 内部需单独监听，父页的监听对 iframe 内容无效
自定义菜单 DOM 渲染时机与定位避坑
菜单元素不能在 contextmenu 事件中直接 appendChild 后立刻 getBoundingClientRect() 计算位置——此时浏览器尚未完成样式计算，宽高可能为 0，导致定位偏移。正确做法是用 requestAnimationFrame 延迟到下一帧渲染后读取尺寸。
另外，绝对定位的菜单容易被父容器的 overflow: hidden 截断，或受 transform、will-change 等属性影响形成新的定位上下文，使 top/left 失效。
- 菜单建议挂载到
document.body下，避免嵌套定位干扰 - 用
event.clientX和event.clientY定位，而非pageX/pageY（后者含滚动偏移，易错） - 添加边界检测：如果菜单右侧/底部超出视口，自动反向展开（例如改用
right: 0替代left）
键盘操作支持：ESC 关闭和方向键导航怎么做
仅靠鼠标点击关闭菜单远远不够。用户按 ESC 时必须销毁菜单，否则焦点卡死、体验断裂。同时，用键盘打开菜单（如 Shift+F10）后，应支持 ↑/↓ 移动焦点、Enter 触发、Tab 跳出——这些不是锦上添花，而是无障碍合规硬性要求。
关键点在于菜单 DOM 必须可聚焦（tabindex="-1"），且所有菜单项用 button 或带 role="menuitem" 的元素，否则 focus() 无效，键盘导航形同虚设。
- 监听
keydown事件时，需判断event.target是否在菜单内，避免全局响应干扰其他输入框 -
ESC逻辑要清理事件监听器（尤其是document上的），防止内存泄漏 - 方向键导航需维护当前选中索引，并在每次移动后显式调用
element.focus()
React/Vue 中动态渲染菜单的副作用陷阱
框架组件内直接写 useState 或 v-model 控制菜单显隐，看似简洁，但会导致菜单 DOM 在每次右键时重建——丢失焦点状态、重置动画、中断键盘导航链。更严重的是，若菜单内含异步加载项（比如权限过滤后的子菜单），重复挂载可能触发多次请求。
根本解法是把菜单作为独立组件挂载在根节点下，通过 Context 或全局状态控制显隐和数据，右键事件只负责传递坐标和上下文数据，不参与渲染生命周期。
- 避免在
contextmenu回调里调用setState后立即操作 DOM（如focus()），因 React 更新是异步的 - Vue 中使用
v-show而非v-if，保证 DOM 始终存在，便于焦点管理和键盘操作 - 务必在菜单卸载时清除所有定时器、
addEventListener和 MutationObserver 实例
最麻烦的从来不是画出菜单，而是让它在各种缩放、滚动、焦点切换、框架更新节奏下始终响应准确——尤其当菜单要嵌套子菜单或联动表单校验时，坐标计算和事件流隔离稍有疏漏，就会出现“点了没反应”或“关不掉”的静默故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
