现代浏览器默认阻止contextmenu事件监听，需检查iframe沙箱、CSP策略、Shadow DOM绑定位置；preventDefault()须同步调用并阻断冒泡；定位应使用pageX/Y并设fixed；自定义菜单需支持焦点、键盘导航及ARIA属性。
右键菜单被浏览器拦截，contextmenu 事件没触发？
不是代码写错了，而是现代浏览器（Chrome 91+、Edge 90+、Firefox 90+）默认阻止了页面中对 contextmenu 事件的监听，除非页面明确启用了「右键菜单自定义能力」。这通常发生在 iframe 嵌入、跨域子资源、或启用了某些 CSP 策略的页面里。
检查是否命中以下任一条件：
-
<iframe>没加sandbox="allow-scripts allow-same-origin"或缺失allow-popups - 页面设置了 CSP 头：
script-src 'self'但没包含'unsafe-inline'（影响内联事件绑定） - 在 Shadow DOM 内监听，但没在
shadowRoot上绑定，而是绑在了 light DOM 的父元素上
最简验证方式：在控制台执行 document.addEventListener('contextmenu', e => console.log('ok'), true)，右键看是否有输出。没输出，说明事件根本没到达 document 层级。
preventDefault() 生效但菜单仍弹出？
常见于监听位置错误或事件冒泡未阻断。比如给某个 <div id="editor"> 绑了 contextmenu，但用户实际右键点在它内部的 <span> 或 <img> 上——而这些子元素可能自带原生菜单行为（如图片的「另存为」），且它们的事件处理优先级更高。
立即学习“前端免费学习笔记（深入）”；
解决办法：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用事件委托，在父容器上监听，并确保
e.preventDefault()在捕获阶段或目标阶段及时调用 - 对所有可能触发原生菜单的子元素显式禁用：给
<img>加oncontextmenu="return false;"，或统一用 CSSpointer-events: none;（慎用，会禁用所有交互） - 检查是否在异步回调里调用
preventDefault()（例如setTimeout(() => e.preventDefault(), 0)），这已失效——必须同步调用
自定义菜单定位偏移、跟随鼠标不准
直接用 e.clientX/e.clientY 计算坐标看似合理，但在缩放（zoom）、滚动（scrollTop）、iframe 嵌套、或使用 position: fixed 容器时极易错位。
稳妥做法：
- 用
e.pageX/e.pageY替代clientX/Y，它们已自动补偿滚动偏移 - 若菜单挂载在
body下，需减去document.documentElement.scrollLeft/Top（IE 兼容场景） - 避免用
position: absolute+top/left，改用position: fixed+left/top，绕过父级定位上下文干扰 - 移动端 Safari 对
contextmenu支持极弱，别依赖它；改用长按模拟（touchstart+setTimeout）
示例定位逻辑：
menu.style.left = (e.pageX - 10) + 'px';<br>menu.style.top = (e.pageY - 10) + 'px';<br>menu.style.position = 'fixed';
菜单 DOM 插入后无法聚焦或键盘导航失效
原生右键菜单支持 Tab 切换、Enter 触发、Esc 关闭，但手写的 <div class="menu"> 默认不参与焦点流，也不响应键盘事件。
最小可用改进：
- 给菜单容器加
tabindex="-1"，再在show()后立即menu.focus() - 监听
keydown：捕获Escape关闭菜单；ArrowDown/Up移动焦点到菜单项；Enter/Space触发当前项 - 每个菜单项用
<button type="menuitem">或至少加role="menuitem"+tabindex="0" - 别忘了用
aria-haspopup="true"和aria-expanded同步状态，否则屏幕阅读器不可见
一个容易被忽略的细节：菜单关闭时，焦点应返回触发右键的原始元素，否则键盘用户会“迷失”在页面中。
