先记住这个答案
自定义右键菜单通常监听 contextmenu，在回调中调用 event.preventDefault() 阻止浏览器菜单，再按事件位置展示操作项。实现时还要处理菜单靠近屏幕边缘时翻转、点击外部或按 Escape 关闭，以及菜单内部的焦点移动。用户可能通过键盘而非鼠标请求上下文菜单，所以不能只提供“右键坐标”这一条可用路径。
- 菜单入口监听
contextmenu preventDefault()取消浏览器菜单- 位置要处理视口边缘
- 操作仍需键盘可访问
文件树节点显示操作菜单
在文件树上右键，展示“重命名”“删除”等操作。假设页面已有一个 id="file-menu" 的隐藏菜单，先阻止默认菜单，再定位面板；如果事件来自键盘且没有理想指针位置，可把菜单放在当前聚焦节点附近。
const tree = document.querySelector('#file-tree')
const menu = document.querySelector('#file-menu')
tree.addEventListener('contextmenu', event => {
const row = event.target.closest('[data-file-id]')
if (!row || !tree.contains(row)) return
event.preventDefault() // 取消可取消的浏览器菜单
const rect = row.getBoundingClientRect()
const noPointerPosition = event.clientX === 0 && event.clientY === 0
const x = noPointerPosition ? rect.left : event.clientX
const y = noPointerPosition ? rect.bottom : event.clientY
menu.dataset.fileId = row.dataset.fileId
menu.style.left = x + 'px'; menu.style.top = y + 'px'
menu.hidden = false // 菜单自身还需处理焦点与关闭
})委托监听让新加入的树节点也能使用菜单。closest() 找到被点击的文件行，再用 contains() 确认它属于当前树，避免命中嵌套外部区域。
键盘触发时，事件坐标可能没有可用的指针位置；示例只在两个坐标都为 0 时用当前文件行作为回退锚点，点击视口左边缘但纵坐标有效时仍按指针位置显示。恰好点击视口原点也会走回退；复杂组件可结合实际输入方式进一步判断。菜单应采用与坐标一致的定位方式，例如固定定位，还要补关闭路径和焦点策略。仅把 <div> 显示出来而不能用键盘选择操作，会让键盘和辅助技术用户失去功能。
拦截有边界
contextmenu 并不等于每一次物理右键，触控长按、键盘菜单键等也可能触发；浏览器还可能保留某些特殊操作进入原生菜单的方式。
不要用禁止右键保护图片或数据，用户仍能通过其他方式访问资源。自定义菜单的目的应是提高操作效率，同时保留可见按钮或其他替代入口。
菜单打开后要根据面板宽高修正坐标：在视口右下角直接以点击点作为左上角，后半部分可能被裁掉。可以测量面板尺寸，把 left、top 限制在可见范围，或改为朝点击点左上侧展开。键盘触发时则可沿当前行定位，不要因为没有鼠标坐标把菜单丢在屏幕原点。
操作完成或按 Escape 关闭后，应把焦点送回原来的树节点。若菜单项只是能被鼠标点的普通 <div>，关闭逻辑再完整也不能让键盘用户操作；优先使用可聚焦的按钮，并设计方向键或 Tab 的导航方式。
容易答错的地方
- 只监听
mousedown的右键按钮 - 那只是按下动作，键盘打开上下文菜单的路径会丢失；应监听
contextmenu。 - 显示菜单却不管理焦点
- 键盘用户可能无法进入菜单项，也不清楚关闭后焦点去哪里。
面试官还会怎么问？
键盘能触发 contextmenu 吗？
可以，键盘菜单键等操作可能触发，菜单位置应有无鼠标坐标时的策略。
preventDefault() 一定能阻止菜单吗？
只对可取消的默认行为有效，浏览器也可能保留特定原生菜单入口；不应作为安全屏障。
菜单怎么关闭？
常见方式有 Escape、点击菜单外和选择一项后关闭，并把焦点还给合理位置。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。