自定义右键菜单需用 javascript 拦截 contextmenu 事件并立即调用 e.preventdefault()，绑定到具体目标元素（如加 tabindex="0" 的 div/span），动态计算坐标定位菜单于 document.body，并完整处理关闭逻辑与移动端 fallback。
直接在 index.html 里加个自定义右键菜单，不是靠 HTML 标签声明就能实现的——它必须用 JavaScript 拦截 contextmenu 事件、调用 e.preventDefault()，再动态挂载和定位 DOM。不这么做，原生菜单一定会闪现或共存。
为什么 contextmenu 绑了却在 div/span 上没反应
中性元素（如 div、span）在 Safari（尤其是 iOS）和部分旧浏览器中默认不触发 contextmenu。这不是 bug，是规范行为。
- 给目标元素加
tabindex="0"，让它可聚焦、可捕获上下文事件 - 避免只绑在
document上却期望只对某个img生效——应优先绑定到具体容器，比如document.getElementById('file-list') - 别用内联
oncontextmenu="handler()"：无法动态解绑，也不支持{ once: true }等选项 - iFrame 内部的右键事件不会冒泡到父页，需单独对其
contentDocument绑定
preventDefault 必须写在 handler 第一行且同步执行
e.preventDefault() 不是“可选步骤”，而是“开关”。一旦 contextmenu 事件流结束，再调用就无效了。
- 错误写法：
if (e.target.matches('.safe-area')) { e.preventDefault(); }—— 其他区域右键仍会弹原生菜单 - 正确写法：不管是否显示菜单，先执行
e.preventDefault()，再做逻辑判断 - 常见陷阱：把它包在
setTimeout、Promise.then或条件分支外层，但漏掉某个分支 - 不要依赖
event.button === 2做二次过滤——contextmenu本身已限定为右键，且该属性在旧环境不可靠
菜单定位不能只靠 clientX/clientY 直接赋值
直接写 menu.style.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 - 若菜单需相对于某容器（如表格行），改用
e.target.getBoundingClientRect()转换坐标，再叠加window.scrollX/Y
菜单 DOM 必须挂到 document.body 且关闭逻辑要完整
把菜单插进被点击元素内部，看似方便，实则极不稳定：React/Vue 重渲染、innerHTML = 覆盖、甚至父容器 display: none 切换，都会让菜单瞬间消失或错位。
- 统一挂到
document.body.appendChild(menu)，样式设position: fixed或absolute+ 动态top/left - 关闭动作不能只靠“点击菜单项”：必须监听
document.click（判断是否点在外部）、keydown（监听Escape）、以及页面滚动（scroll） - 每次打开菜单前，先清理上一次绑定的临时事件（如
document.removeEventListener('click', closeHandler)），否则重复绑定会导致内存泄漏 - 菜单关闭后记得调用
menu.remove()或至少menu.style.display = 'none'，并恢复焦点（尤其当原目标是input时）
最易被忽略的是：移动端没有右键，长按才是等效操作；而 iOS Safari 对 contextmenu 的支持直到 15+ 版本才稳定——如果你的用户群含大量 iPhone 用户，得准备 fallback 方案，比如长按触发、或干脆禁用右键交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
