html自定义右键菜单需先用event.preventdefault()拦截原生菜单，挂载到document.body并用clientx/clienty定位，注意iframe和shadow dom作用域隔离及移动端长按降级。

HTML 默认右键菜单不能直接“自定义样式+功能”，但可以通过 contextmenu 事件完全拦截并替换——关键不是“能不能”，而是“拦不拦得住”和“替不替得稳”。

如何用 event.preventDefault() 拦住原生右键菜单

这是所有自定义的前提。不阻止默认行为，你的菜单弹出来的同时原生菜单也跟着弹，体验极差。

• contextmenu 是冒泡事件，建议监听在具体目标元素（如 <div id="editor">）而非整个 <code>document，避免误拦表单控件（<input>、<textarea></textarea>）的右键粘贴等刚需操作
• 必须在事件回调里立刻调用 event.preventDefault()，延迟哪怕 1ms（比如塞进 setTimeout）都可能让原生菜单闪现
• 别忘了 event.stopPropagation()（可选），防止父级重复监听导致多次弹出自定义菜单

自定义菜单 DOM 结构怎么放才不被意外销毁

动态创建的菜单元素如果挂载在被右键的目标内部，容易因目标重渲染（React/Vue 更新、innerHTML 覆盖）而消失；挂太外又难定位。稳妥做法是固定挂到 document.body，再靠坐标定位。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 菜单 <div class="custom-menu"> 创建后用 <code>document.body.appendChild(menu) 直接挂载，与业务 DOM 解耦
• 用 event.clientX / event.clientY 计算位置，别用 getBoundingClientRect() —— 后者依赖目标元素位置，滚动时易错位
• 菜单显示后，监听一次 click 或 blur 自动隐藏，但注意：点击菜单项本身不能触发隐藏，需用 event.target.closest(".custom-menu") === null 判断是否点在外部

为什么右键菜单在 iframe 或 Shadow DOM 里经常失效

根本原因是事件作用域隔离：contextmenu 不会跨 iframe 边界冒泡，Shadow DOM 默认开启 mode: "closed" 也会屏蔽事件穿透。

• 若右键目标在 iframe 内，必须在 iframe 的 contentDocument 中监听，主页面监听无效
• Shadow DOM 场景下，确保使用 mode: "open"，并在其根节点（shadowRoot）上绑定 contextmenu 事件
• 移动端 Safari 对 contextmenu 支持极弱（常被忽略），真要兼容需降级为长按触发（touchstart + 定时器），且禁用 -webkit-user-select: none 防止误判

最麻烦的不是画菜单，而是让菜单在各种边界场景下“稳住不闪、不漏、不卡”——滚动、缩放、iframe 嵌套、Shadow DOM、移动端长按模拟，每个都可能吃掉你一个 preventDefault() 或一个 position: fixed 的细节。