contextmenu事件中e.preventdefault()必须无条件同步写在回调函数第一行，否则原生菜单会干扰自定义菜单；菜单dom需动态创建并挂载到document.body，用position:fixed和clientx/clienty定位，同时缓存mouseup时的selection以支持上下文操作。
contextmenu 事件必须同步调用 e.preventDefault()
不拦住原生菜单，你的按钮就永远在原生菜单后面闪一下再出现——甚至根本点不到。关键不是“有没有写”，而是“写在哪一行”。e.preventDefault() 必须出现在事件回调函数第一行，不能包在 if 分支里、不能塞进 setTimeout、也不能等 window.getSelection() 返回后再调。
常见错误写法：if (e.target.matches('.editable')) { e.preventDefault(); } —— 其他区域右键仍弹原生菜单Promise.resolve().then(() => e.preventDefault()) —— 原生菜单已触发，补救无效
正确姿势：
- 绑定到具体容器（如
document.getElementById('editor')），而非盲目绑document - handler 开头无条件执行
e.preventDefault() - 之后再判断是否该显示菜单（比如检查
e.target.matches('.has-context-menu')）
按钮 DOM 必须挂到 document.body 且设 position: fixed
把菜单按钮写死在 HTML 里，或插进被点击的 div 内部，等于埋雷：Vue/React 重渲染会删掉它，innerHTML = '' 会清空它，父级 overflow: hidden 或 transform 会让它错位或消失。
可靠做法是 JS 动态创建、挂载、定位：
- 菜单节点创建后立即执行
document.body.appendChild(menuEl) - 样式必须含
position: fixed（不是absolute），避免祖先transform干扰定位 - 定位用
e.clientX/e.clientY，不是pageX/pageY（后者受滚动影响） - 必须做边界检测：
left = Math.min(e.clientX, window.innerWidth - menuEl.offsetWidth)
按钮交互逻辑要区分触发源和选区上下文
右键菜单里的按钮不是静态列表——“复制”“删除”“替换”这些动作，往往依赖当前光标位置或选中内容。直接在 contextmenu 里调 window.getSelection() 通常返回空，因为浏览器已在触发事件时清空了选区。
解决办法是提前缓存：
- 监听
mouseup（比mousedown更稳），存下window.getSelection()对象 - 在
contextmenu中读取缓存，并校验cachedSelection.rangeCount > 0和cachedSelection.toString().trim() - 对
<textarea></textarea>，改用selectionStart/selectionEnd定位单词边界，避免按空格切分导致标点误判
按钮点击后，别忘了清理：移除菜单 DOM、恢复焦点（尤其当菜单覆盖了输入框）、清除缓存 selection。
iFrame、Shadow DOM 和移动端是三个高频失效点
你以为代码跑通了，结果一嵌 iframe 就失效；一用 Web Components 就没反应；一上 iOS Safari 就压根不触发——这不是你代码有问题，是作用域根本不在你的监听范围内。
必须单独处理：
-
iframe：拿到其contentDocument，在其上重新绑定contextmenu监听器 - Shadow DOM：确保
shadowRoot.mode === 'open'，监听目标必须是shadowRoot，不是宿主元素 - iOS Safari：contextmenu 支持从 iOS 15+ 才稳定，真要兼容得降级为
touchstart+ 长按计时器模拟
最常被忽略的是：菜单关闭后没 remove() 节点，残留 DOM 会拦截后续点击和键盘事件，尤其影响屏幕阅读器行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
