必须绑定contextmenu事件并同步调用event.preventdefault()，缺一不可；中性元素需加tabindex="0"才可靠触发，ios safari支持差，定位须结合视口边界与菜单尺寸动态计算，关闭逻辑需处理esc、外部点击及事件清理。
直接阻止默认右键菜单并动态显示自定义 DOM 是唯一可行路径；contextmenu 事件必须绑定、event.preventDefault() 必须同步调用，缺一不可。
为什么 contextmenu 事件绑了却没反应
不是所有元素默认触发 contextmenu：div、span 等中性元素在部分浏览器（尤其是 Safari 移动端）需显式设置 oncontextmenu 或 tabindex 才能捕获事件。更稳妥的做法是给目标元素加 tabindex="0"，让它可聚焦、可响应上下文事件。
- 检查是否误绑在
document上却期望只对某个img生效——应优先绑定到具体容器，如document.getElementById('file-list') - 避免用内联
oncontextmenu="handler()"，它无法动态解绑，也不支持事件选项（如{ once: true }） - iOS Safari 对
contextmenu支持极差，15+ 版本才稳定；Android Chrome 一般没问题，但长按仍比右键更可靠 - iframe 内部的右键事件不会冒泡到父页，需单独对其
contentDocument绑定
event.preventDefault() 必须写在第一行，且不能异步
一旦 contextmenu 事件流结束，再调用 preventDefault() 就无效了。常见错误是把它包在 setTimeout、Promise.then 或条件判断分支外层但漏掉某个分支。
- 错误写法：
if (e.target.matches('.safe-area')) { e.preventDefault(); }—— 其他区域右键仍会弹原生菜单 - 正确写法：不管是否显示菜单，先执行
e.preventDefault()，再做逻辑判断 - 若用了事件委托（如绑定在
ul上），记得用e.target.closest('.item')判断命中，但preventDefault()仍要放在 handler 开头 - 不要依赖
event.button === 2做二次过滤——它在某些旧环境不准确，且contextmenu本身已限定为右键
菜单定位不能只靠 clientX/clientY
直接赋值 left = e.clientX + 'px' 看似简单，但滚动、缩放、transform 容器都会导致偏移。真实项目里，坐标必须结合视口边界与菜单尺寸动态计算。
- 先获取菜单宽高：
const w = menu.offsetWidth, h = menu.offsetHeight - 计算理想位置：
let left = e.clientX, top = e.clientY - 右侧越界？
if (left + w > window.innerWidth) left = window.innerWidth - w - 底部越界？
if (top + h > window.innerHeight) top = window.innerHeight - h - 若菜单需相对于某容器（如表格行），改用
target.getBoundingClientRect()转换坐标系，而非一律用 client 值 - 别用
position: fixed—— 它无视父级transform，但在有缩放页面中反而更稳；absolute需确保祖先无transform或perspective
菜单关闭逻辑最容易漏掉三件事
残留菜单不是样式问题，是事件生命周期失控。点击菜单项后不关、ESC 不响应、外部点击没拦截，这三类问题占实际线上报错的 70% 以上。
- 每个菜单项
click回调末尾必须显式隐藏菜单：menu.style.display = 'none'或menu.remove() - 监听
document.addEventListener('keydown', e => e.key === 'Escape' && menu.style.display === 'block' && hide())，别用keyCode - 监听
document.addEventListener('click', e => !menu.contains(e.target) && !e.target.closest('[data-context-menu]') && hide())—— 注意排除菜单自身和触发源 - 每次打开菜单前，先清理上次绑定的临时事件（尤其是
document.click和keydown），否则重复绑定导致内存泄漏和多次触发 - 右键前的焦点元素（如输入框）要缓存，关闭后用
el.focus({ preventScroll: true })恢复，否则 Tab 键导航会断
真正难的不是“怎么弹出来”，而是“什么时候该消失”和“消失后谁还记得刚才在哪儿”。边界计算、事件清理、焦点恢复，这三处不处理，菜单就会在用户看不见的地方悄悄卡住交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
