HTML原生contextmenu事件和menu元素已被标准废弃，现代浏览器不再支持menu渲染；仅contextmenu事件监听仍可用，需用div+绝对定位自实现右键菜单，并注意定位、销毁、移动端适配及细节兼容性问题。
HTML 原生 contextmenu 事件和 menu 元素已废弃，Chrome 65+、Firefox 99+、Safari 15.4+ 都不支持——别再试图用它实现右键菜单了。
为什么 contextmenu 事件还能监听，但 menu 标签完全失效
浏览器保留了 contextmenu 事件的监听能力（防止老代码崩），但彻底移除了对 menu 和 menuitem 元素的渲染支持。你写 ，页面上什么都不会出现。
- 不是兼容性问题，是标准层面被移除：WHATWG HTML 规范已删除该特性
-
event.preventDefault()在contextmenu里仍有效，这是你唯一能用的入口 - 所有现代框架（React/Vue/Svelte）里直接绑定
@contextmenu或onContextMenu是安全的，但后续必须自己画菜单
用 div + position: absolute 实现右键菜单的关键点
自定义菜单本质是“拦截原生右键 → 计算鼠标位置 → 渲染 DOM 节点 → 绑定点击逻辑”，难点不在绘制，而在定位和销毁。
- 右键坐标要用
event.clientX/event.clientY，不是pageX—— 后者受滚动影响，菜单容易飞出视口 - 菜单容器必须设
position: absolute，且父容器不能是transform或perspective触发的层叠上下文，否则定位偏移 - 必须监听
click或blur关闭菜单：点击菜单外区域时，用document.addEventListener('click', hideMenu)，并在菜单click里event.stopPropagation() - 移动端没有右键，
contextmenu事件在 iOS Safari 上默认不触发，需额外加touchstart模拟长按（300ms+）
React 中避免重复挂载/内存泄漏的写法
函数组件里直接在 useEffect 外绑 document.addEventListener 会触发多次，而用 useEffect 又可能因依赖项导致重绑。
- 把
hideMenu定义为 stable 函数：const hideMenu = useCallback(() => setVisible(false), []) - 在
useEffect里只绑定一次全局 click 监听，清理函数里解绑：useEffect(() => { document.addEventListener('click', hideMenu); return () => document.removeEventListener('click', hideMenu); }, [hideMenu]) - 不要用
ref存菜单 DOM 来判断点击是否在外——改用event.target.closest('.context-menu')更可靠 - 菜单弹出后焦点不会自动进入，如需键盘操作（↑↓回车），得手动
focus()第一个可交互元素，并实现Tab循环
真正麻烦的从来不是画个菜单框，而是处理滚动、缩放、iframe 嵌套、高 DPI 屏幕下的像素对齐，以及 Safari 对 pointer-events: none 在伪元素上的诡异表现——这些细节不写具体业务场景根本压不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
