html自定义右键菜单必须调用event.preventdefault()阻止原生菜单，否则无法显示；需用pagex/pagey定位并处理transform偏移；复制用clipboard api，图片下载用blob+a标签；恢复原生菜单应返回true或移除监听器。
HTML 默认右键菜单和自定义右键菜单本质不同：前者是浏览器原生行为，后者是用 contextmenu 事件 + event.preventDefault() 拦截后手动实现的 UI，不存在“增强版默认菜单”这回事。
为什么 contextmenu 事件必须调用 event.preventDefault()
不阻止默认行为，自定义菜单根本不会出现——浏览器会直接弹出原生右键菜单。这个动作不是可选优化，而是必要前提。
- 只监听
contextmenu但不调用preventDefault()，等于什么都没做 - 在移动端（如 Chrome for Android），部分设备甚至不触发
contextmenu事件，需额外处理长按模拟 - 若在父元素上阻止了默认行为，但子元素（如
<input>）需要原生上下文菜单（如“粘贴”“检查拼写”），得单独给子元素重新绑定并放行
contextmenu 的坐标定位经常不准？
直接用 event.clientX/event.clientY 显示菜单时，容易被滚动、缩放、iframe 偏移干扰，导致菜单飘走或遮挡。
- 优先用
event.pageX/event.pageY（兼容性好，已含页面滚动偏移） - 若菜单容器有
transform或position: fixed，需手动减去容器 offset，否则位置错乱 - 避免用
top/left硬设，改用style.transform = translate(${x}px, ${y}px)更稳定
自定义菜单里怎么触发原生功能（比如“复制”“保存图片”）？
不能靠模拟右键再点原生项——浏览器禁止脚本调起原生菜单。可行路径只有两条：
- 对文字内容：用
navigator.clipboard.writeText()手动复制，需 HTTPS 或 localhost 环境 + 用户手势触发（如 click） - 对图片：用
fetch获取 blob 后创建临时<a download></a>链接触发下载，无法直接调“另存为”对话框 - 想恢复某区域的原生菜单？给该元素加
oncontextmenu="return true"或移除监听器，别试图“转发”事件
真正难的不是画个菜单，而是边界情况：iframe 跨域、触摸屏长按延迟、键盘焦点与右键不一致、屏幕阅读器支持缺失——这些往往上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
