应阻止特定区域右键菜单而非全局禁用，用pagex/y定位并校正缩放与滚动，点击外部时主动移除菜单，移动端改用长按检测并优先使用平台规范组件。
阻止默认右键菜单但保留部分原生行为
直接 event.preventDefault() 会彻底禁用右键菜单，连「检查元素」「复制链接地址」这类开发者常用操作也消失——这不是真需求，只是想屏蔽干扰项，同时保留调试能力。
正确做法是只在特定区域或条件下阻止：
- 对画布、拖拽区、富文本编辑器等交互密集区域，用
addEventListener('contextmenu', e => e.preventDefault()) - 对普通内容区（如文章段落），不监听
contextmenu，让浏览器默认菜单照常出现 - 若需区分左右键，注意
MouseEvent.button在右键触发时为2，但contextmenu事件本身已明确是右键，无需再判断button
自定义菜单定位不准或跟随鼠标偏移
常见错误是直接用 event.clientX / event.clientY 设置菜单 left 和 top，结果菜单总出现在鼠标左上角甚至屏幕外——因为没考虑滚动偏移和 CSS 缩放。
关键修复点：
- 用
event.pageX和event.pageY（含滚动偏移），而非clientX/Y - 如果页面有
transform: scale()或 iframe 嵌套，需额外校正：先用getBoundingClientRect()获取目标容器位置，再相对计算 - 菜单弹出前检查边界：
Math.min(window.innerWidth - menuWidth, x)防止右侧溢出
菜单点击后无法自动关闭或焦点丢失
自定义菜单本质是 DOM 元素，不会像原生菜单那样点击即收起。用户点完一项后菜单还挂着，下一次右键又叠加一个，视觉混乱且内存泄漏。
必须主动管理生命周期：
- 监听全局
click或mousedown，用event.target.closest('.custom-menu')判断是否点在菜单内；不是则调用menu.remove() - 避免用
blur—— 菜单本身不获焦，blur不触发 - 若菜单含输入框或按钮，点击内部控件时别误关菜单，需在事件捕获阶段
stopPropagation()
移动端长按触发 contextmenu 的兼容性陷阱
Android Chrome 和 Safari iOS 对长按是否触发 contextmenu 行为不一致：Safari 默认不触发，需显式设置 touch-callout: none + -webkit-user-select: none 才可能生效，但仍有概率失败。
更可靠的做法是放弃依赖 contextmenu：
- 监听
touchstart+ 定时器（如 500ms 后判定为长按），手动 show 菜单 - 用
pointerdown统一处理，兼容 mouse/touch/pen，但需注意preventDefault()后可能影响后续click，慎用 - 移动端优先考虑底部 Action Sheet 等平台规范组件，而非模拟右键菜单
最易被忽略的其实是样式隔离：自定义菜单的 z-index 很容易被父容器的 transform 或 will-change 截断堆叠上下文，导致菜单被遮挡。遇到显示异常，先查父级是否有这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
