contextmenu 属性和 已被主流浏览器弃用，自定义右键菜单唯一可靠方式是 javascript 拦截 contextmenu 事件并同步调用 e.preventdefault()，挂载菜单到 document.body 并用 position: fixed 定位，同时兼顾无障碍、移动端及 iframe 兼容性。
contextmenu 属性根本不会生效
加 contextmenu="my-menu" 到元素上，浏览器不会弹出自定义菜单——主流浏览器（Chrome、Firefox、Edge、Safari）早已弃用该属性的渲染逻辑。<menu type="context"></menu> 同样不被支持，写死在 HTML 里等于白写。你看到的“能用”，大概率是巧合或误判：比如同时监听了 contextmenu 事件并调用了 preventDefault()，误以为是属性起了作用。
真正起作用的是 contextmenu 事件 + preventDefault()
自定义右键菜单唯一可靠路径是 JavaScript 拦截事件流：
- 必须在
contextmenu事件回调第一行同步执行e.preventDefault()；延迟（如包在setTimeout、Promise.then或条件分支外层）会导致原生菜单闪现 - 推荐用捕获阶段监听：
element.addEventListener('contextmenu', handler, { capture: true })，避免子元素调用stopPropagation()中断流程 - 别依赖
event.button === 2做过滤——现代浏览器中contextmenu事件已专指右键，额外判断反而漏覆盖 - 对
<input>、contenteditable元素要格外小心：盲目拦截会破坏粘贴、拼写检查等基础功能，应限定作用域（如只对[data-context-menu]元素响应）
动态创建菜单 DOM 的关键细节
菜单不能写死在 HTML 中，也不能挂载在可能带 overflow: hidden 或 transform 的父容器下：
- 必须挂载到
document.body下，定位用position: fixed（非absolute），避免父级 CSS 干扰 - 坐标用
e.clientX/e.clientY，但需叠加window.scrollX/window.scrollY才准确；直接用pageX/pageY在滚动后会错位 - 每次右键前先调
closeMenu()，确保旧实例被remove()，否则内存泄漏+重复显示 - 菜单容器加
tabindex="-1"并在插入后立即focus()，否则键盘用户无法操作 - 关闭逻辑不止靠
click：必须同时监听keydown（Escape）、blur和mousedown（排除菜单自身和触发元素）
移动端和 iframe 是两个典型坑点
iOS Safari 对 contextmenu 事件支持极弱，iOS 15+ 才趋于稳定；Android Chrome 虽支持，但长按仍可能触发系统菜单叠加。iframe 内部事件完全不会冒泡到父页：
- 移动端建议降级为
touchstart+setTimeout模拟长按，并配合-webkit-user-select: none减少干扰 - iframe 必须单独对其
contentDocument绑定监听器，父页的全局监听无效 - 若页面有缩放（
transform: scale()）或视口边界限制，菜单需动态检测是否超出，并反向展开（如改用right: 0替代left） - 无障碍不是可选项：菜单需带
role="menu"，菜单项用role="menuitem"或<button></button>，否则屏幕阅读器无法识别
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
