禁用右键默认行为需在contextmenu事件中调用e.preventDefault()，且仅对带data-context-menu属性的元素生效；自定义菜单应动态创建并挂载到body下，用fixed定位、滚动偏移校正及视口边界检测实现精准显示；点击外部关闭需监听document mousedown并排除菜单和触发元素；菜单配置建议通过data-menu-id关联Map管理，支持异步加载与防重复请求。
右键菜单默认行为怎么禁用
不阻止默认行为，contextmenu 事件一触发，浏览器就弹出原生右键菜单，自定义内容根本没机会显示。关键就在事件回调里调 e.preventDefault() —— 但得注意时机：必须在事件捕获或冒泡阶段、且在菜单渲染前执行。
常见错误是绑定在父容器上却忘了检查 e.target，结果点哪都禁用，连输入框的复制粘贴都失效。稳妥做法是只对特定类名或 data 属性的元素响应：
element.addEventListener('contextmenu', e => {
if (!e.target.matches('[data-context-menu]')) return;
e.preventDefault();
showCustomMenu(e.clientX, e.clientY);
});
自定义菜单 DOM 怎么插入和定位
菜单 DOM 不能写死在 HTML 里，得动态创建并挂到 document.body 下，否则可能被父级 overflow: hidden 截断，或受 transform 定位影响偏移。定位用 e.clientX/e.clientY 最直接，但要注意页面滚动偏移 —— 得加上 window.scrollX 和 window.scrollY。
还要防菜单超出视口：如果右键位置靠近右/下边缘，菜单需自动反向展开。简单策略是判断：clientX + menuWidth > window.innerWidth 就左对齐，clientY + menuHeight > window.innerHeight 就上对齐。
- 菜单元素建议设
position: fixed，避免父级 CSS 干扰 - 插入后立即用
focus()让键盘可操作（尤其对无障碍很重要） - 别忘了加
tabindex="-1"，否则无法聚焦
菜单点击后如何关闭和清理
用户点菜单项后，菜单要立刻消失；点菜单外区域也要关。靠监听 click 不够 —— 点击菜单自身不该关闭。推荐用 mousedown 监听 document，再用 e.target.closest('.custom-menu') 判断来源：
document.addEventListener('mousedown', e => {
if (!e.target.closest('.custom-menu') && !e.target.matches('[data-context-menu]')) {
closeMenu();
}
});
容易漏的是重复绑定：每次右键都新建菜单 DOM，但旧的没 remove，内存泄漏+多次触发。务必在 showCustomMenu() 开头先 closeMenu()，确保同一时间最多一个实例。
- 关闭时记得移除 document 上的临时监听器（用命名函数或
AbortController） - 键盘按
Escape也要关菜单，加个keydown监听判断e.key === 'Escape' - 不要用
setTimeout延迟关闭 —— 用户快速右键再点别的元素，会误关
不同元素绑定不同菜单怎么实现
靠 e.target 区分太脆弱，DOM 结构一变就失效。更可靠的是提前把菜单配置挂在元素上，比如 data-menu-id="file-menu"，再用 Map 存配置：
const menuConfigs = new Map([
['file-menu', { items: [{ label: '保存', action: saveFile }]}],
['text-menu', { items: [{ label: '复制', action: copyText }]}]
]);
触发时读取 e.target.dataset.menuId 查表，动态生成菜单项。这样 HTML 和逻辑解耦，也方便测试和复用。
复杂点在于异步菜单项（比如右键图片时要先 fetch 元信息再决定是否显示「下载原图」），这时菜单不能立刻 render，得留 loading 状态，并防止用户重复右键触发多次请求 —— 建议加个节流开关或用 AbortSignal 中断前序请求。
