右键事件被表格元素拦截时，需确保contextmenu事件能到达目标元素：检查父级是否误调用preventDefault()，为td/tr显式绑定事件而非仅table，避免内联oncontextmenu，使用addEventListener并注意捕获阶段；自定义菜单定位应基于clientX/Y并做视口边界限制；移动端需用touchstart/pointerdown防抖模拟长按。
右键事件被表格元素拦截，contextmenu 不触发怎么办
默认情况下，<table> 或其子元素（如 <td>、<tr>）会响应右键，但若页面有全局 contextmenu 监听器或某些 UI 库（如 Ant Design、Element Plus）已阻止冒泡，你的表格右键监听可能完全失效。
关键不是“加监听”，而是确保事件能到达目标元素：
- 检查是否在父级（比如
<body>或某个容器）上调用了e.preventDefault()且未限定范围 - 给
<td>或<tr>显式绑定，而非只绑在<table>上 —— 表格单元格更常是右键目标 - 避免用
oncontextmenu内联属性，优先用addEventListener('contextmenu', handler, { capture: false })，并确认没被{ capture: true }的上级监听器吞掉
自定义菜单 DOM 渲染后位置偏移、不跟随鼠标
event.clientX 和 event.clientY 是屏幕坐标，直接用于 style.left/style.top 时，若菜单父容器有 transform、scroll 或 position: relative，就会错位。
稳妥做法是让菜单脱离文档流，挂载到 document.body，并用 getBoundingClientRect() 做边界校验：
立即学习“前端免费学习笔记（深入）”；
const menu = document.getElementById('custom-menu');
menu.style.left = Math.max(10, Math.min(event.clientX - 10, window.innerWidth - menu.offsetWidth - 10)) + 'px';
menu.style.top = Math.max(10, Math.min(event.clientY - 10, window.innerHeight - menu.offsetHeight - 10)) + 'px';- 永远做左右/上下边界限制，否则菜单可能被切掉或跑到视口外
- 不要用
offsetLeft/offsetTop计算，它们依赖祖先定位，不可靠 - 如果表格在 iframe 或 shadow DOM 内，
clientX/Y仍有效，但需确保菜单插入到同环境的document中
点击菜单项后表格行状态丢失或事件冲突
右键菜单常用来执行「删除该行」「编辑该单元格」等操作，但若菜单项点击后没显式关闭菜单，或没清理事件监听，后续右键会复用旧数据，甚至触发多次回调。
必须在每次右键时重置菜单上下文：
- 把当前
<tr>或<td>元素存为闭包变量（如const targetRow = e.target.closest('tr');），而不是读取event.target在菜单点击时的状态 —— 此时target已变成<li> - 菜单显示后，监听一次
click外部区域关闭：用document.addEventListener('click', hideMenu, { once: true }) - 菜单项
onclick里务必调用hideMenu()，否则下次右键可能叠加两个菜单
移动端 Safari / Chrome 上长按无法触发 contextmenu
大部分移动端浏览器默认不触发 contextmenu，即使监听了也收不到事件。这不是 bug，是规范行为 —— 移动端没有物理右键。
真要支持触屏场景，得降级处理：
- 监听
touchstart+ 防抖（如 500ms 不松开），模拟长按 → 触发菜单 - 同时保留
contextmenu给桌面，用'ontouchstart' in window判断环境 - 注意：iOS Safari 对
touchstart有 300ms 延迟（除非<meta name="viewport">设置正确），且部分微信内置浏览器禁用touchstart在<table>上的默认行为
最麻烦的其实是表格内嵌表单控件（如 <input type="checkbox">）—— 它们会吃掉 touch 事件，导致长按失效。这时候只能靠 pointerdown + setTimeout 更可靠。
