右键事件被拦截但菜单不显示，是因为父级调用preventdefault()或pointer-events: none；应逐级检查事件阻止和css样式；推荐事件委托+class过滤；自定义菜单需监听document点击和escape键关闭；ios safari不支持contextmenu，需用长按替代。
右键事件被拦截但菜单不显示，为什么 contextmenu 事件没生效？
直接给 <td> 绑定 <code>oncontextmenu 或 addEventListener('contextmenu', ...) 却没反应，大概率是父级元素（比如 <table> 或外层容器）已调用 <code>event.preventDefault()，或者 CSS 设置了 pointer-events: none。检查开发者工具的事件监听器面板，确认事件是否真的触发并被阻止。
实操建议：
- 先在目标
<td> 上加一个临时 <code>console.log，验证contextmenu是否触发：td.addEventListener('contextmenu', e => { console.log('contextmenu fired', e.target); }); - 若无输出，往上逐级检查父元素是否调用了
e.preventDefault()（尤其注意封装过的 UI 库表格组件） - 用浏览器“检查元素”看 computed 样式中
pointer-events是否为none，特别是带遮罩或编辑态的表格 - 给需要右键菜单的单元格加统一 class，比如
class="action-cell" - 监听
<table>：<pre class="brush:php;toolbar:false;">table.addEventListener('contextmenu', e => { if (e.target.matches('td.action-cell')) { e.preventDefault(); showCustomMenu(e.clientX, e.clientY); } });</pre> <li>避免用 <code>e.target.tagName === 'TD'这类宽泛判断——可能误触<th> 或嵌套内容 <h3>自定义右键菜单点击后无法关闭，怎么办？</h3> <p>原生右键菜单点空白处自动消失，但自定义菜单不会——它只是个 <code><div>，得手动监听全局点击或失焦来隐藏。常见错误是只监听菜单内部，漏掉外部点击。 <p>实操建议：</p> <ul> <li>菜单显示后，立即绑定一次性的 <code>document.addEventListener('click', hideMenu, { once: true }) - 如果菜单支持键盘操作，补充监听
Escape键：document.addEventListener('keydown', e => { if (e.key === 'Escape') hideMenu(); }); - 别用
blur或focusout——<div> 默认不可聚焦，需加 <code>tabindex="-1"才能触发移动端 Safari 上
contextmenu事件完全不触发，有替代方案吗？Safari iOS（包括 iPadOS）至今不支持
contextmenu事件，连模拟都不行。这不是 bug，是 Apple 明确未实现的 API。想在移动端提供类似功能，只能换交互方式。实操建议：
- 改用长按（
touchstart+ 定时器）触发菜单：let touchTimer; td.addEventListener('touchstart', e => { touchTimer = setTimeout(() => { showCustomMenu(e.touches[0].clientX, e.touches[0].clientY); }, 500); }); td.addEventListener('touchend', () => clearTimeout(touchTimer)); - 对桌面端和移动端做 UA 判断，或用
'ontouchstart' in window特性检测，避免在非 iOS 设备上重复绑定 - 别试图用
click双击代替——双击缩放行为在 Safari 移动端默认开启，干扰严重
- 改用长按（
怎么让右键菜单只出现在特定单元格，而不是整张表？
靠事件委托 + 条件过滤最稳妥。不要给每个 <td> 单独绑定事件，既影响性能，又难维护。监听 <code><table> 的 <code>contextmenu，再用 e.target 判断是否落在符合条件的单元格上。
实操建议：
