必须在contextmenu事件回调第一行同步调用event.preventdefault()，否则原生菜单会闪现或遮挡自定义菜单；oncontextmenu属性仅内联可用、无法动态控制且在框架中失效，现代标准写法是addeventlistener绑定并立即preventdefault。
必须在 contextmenu 事件回调第一行同步调用 event.preventDefault()，否则原生菜单会闪现或遮挡自定义菜单——这不是“能不能”的问题，而是“拦不拦得住”的前提。
为什么 oncontextmenu 属性不能可靠拦截
HTML 中的 oncontextmenu="return false" 虽然能禁用右键，但它是内联绑定、无法动态控制、不支持事件委托，且在 Vue/React 等框架中完全失效（比如 JSX 的 onContextMenu={() => false} 不会阻止默认行为）。现代标准写法只有一种：addEventListener('contextmenu', handler)，并在 handler 里立刻调 event.preventDefault()。
常见错误包括：
- 把
preventDefault()写在异步逻辑里（setTimeout、Promise.then），哪怕延迟 1ms，原生菜单也会弹出 - 监听了多次
contextmenu，但只在一个回调里写了preventDefault() - 绑定到父容器却没检查
e.target，结果连<input>的粘贴都被拦了
contextmenu 事件监听该绑在哪
全局替换（如整个编辑器区域）就绑 document；局部替换（如表格某一行）优先绑具体容器（如 document.getElementById('table-body')）。不推荐用 oncontextmenu 属性，也不建议盲目绑定到 document 后再靠 e.target.matches() 过滤——容易漏掉子元素或误伤表单控件。
关键点：
- 若页面含
iframe，需单独对其contentDocument绑定，父页监听无效 - 移动端 Safari 对
contextmenu支持极弱（iOS 15+ 才稳定），Android Chrome 一般可用，但需降级为长按模拟 - 对
contenteditable或input元素，应跳过拦截，保留复制/拼写检查等基础功能
自定义菜单 DOM 定位为什么总错位
直接用 event.clientX/event.clientY 赋值给 style.left/style.top 是最常见的错位原因。滚动偏移、缩放（transform: scale()）、fixed 父容器都会让坐标失真。
稳妥做法是：
- 菜单用
position: fixed（避免父级transform干扰） - 定位计算用
event.clientX + window.scrollX和event.clientY + window.scrollY - 必须做视口边界检测：若菜单右侧超出视口，改用
right: 0并左对齐；底部超限则上移 - 不要用
pageX/pageY，它们在横向滚动或 CSS 缩放时不可靠
菜单显示后怎么安全关闭
点击外部、按 Esc、滚动页面都该关闭菜单，但最容易踩坑的是“点击菜单项自己也触发关闭”。监听 document.mousedown 时，必须排除菜单本身和触发元素：
if (!e.target.closest('.custom-menu') && !e.target.matches('.trigger')) { menu.remove(); }
其他要点：
- 菜单关闭后，记得用
cachedFocusEl.focus({ preventScroll: true })恢复焦点（cachedFocusEl是contextmenu触发前缓存的document.activeElement） - 菜单 DOM 应挂载到
document.body，避免被父级overflow: hidden剪裁 - 移动端需禁用
-webkit-user-select: none防止长按时选中文本干扰
真正难的不是画出菜单，而是让每次右键都精准、稳定、不闪退——坐标算错一像素、preventDefault() 晚执行一帧、焦点没恢复，用户感知就是“卡一下”或“点不着”。这些细节不在文档开头，但在真实交互里天天发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
