contextmenu 事件必须绑定到 tr 或 td 而非 table，因默认不冒泡且易被截断；优先 bind tr，需 e.preventDefault() 置首行；定位用 clientX/clientY；菜单挂 body 并及时 remove。
contextmenu 事件必须绑定到 tr 或 td，不能只绑 table
表格本身不触发 contextmenu，右键点击实际命中的是 tr 或 td。如果只在 <table> 上监听，事件根本不会触发——因为事件没冒泡上来（默认不冒泡），或者被中间元素截断。
实操建议：
- 优先给
tr绑定：它能覆盖整行，语义清晰，且避免td内嵌元素（如按钮、链接）干扰事件捕获 - 若需单元格级操作（比如仅对“价格”列右键），直接绑定到
td，用e.target.cellIndex或e.target.classList判断列类型 - 不要用内联
oncontextmenu：无法动态控制、难解绑、不支持{ once: true }等选项 - Element-UI 等框架有封装好的
@row-contextmenu，本质也是监听tr，但帮你省了 preventDefault 和定位逻辑
e.preventDefault() 必须写在 handler 第一行，否则原生菜单闪现
表格右键时，浏览器会立刻弹出原生菜单。哪怕你后面几行代码创建了自定义菜单，只要 e.preventDefault() 不在第一行执行，就会看到“原生菜单闪一下 → 自定义菜单盖上去”的抖动效果。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
function handleContext(e) {
if (!e.target.closest('tr')) return; // ❌ 错：preventDefault 漏了
showMenu(e);
}正确写法：
function handleContext(e) {
e.preventDefault(); // ✅ 必须第一行
if (!e.target.closest('tr')) return;
showMenu(e);
}注意：即使你只想对某些行生效（比如带 data-editable="true" 的行），也得先拦住所有右键，再做条件过滤。
菜单定位要用 e.clientX/e.clientY，别信 getBoundingClientRect()
表格常带滚动容器（overflow-y: auto）或缩放（transform: scale()），用 getBoundingClientRect() 算坐标会导致菜单偏移——它返回的是相对于视口的坐标，但受滚动和 transform 影响，而 clientX/clientY 是鼠标原始位置，更稳定。
实操要点：
- 菜单挂到
document.body，用menuEl.style.left = e.clientX + 'px'直接赋值 - 加边界检测：如果
e.clientX + menuWidth > window.innerWidth，就改用left = window.innerWidth - menuWidth - 避免
position: fixed：滚动时菜单会悬浮在错误位置；用position: absolute+body为父容器更稳 - 移动端 Safari 不可靠，真要兼容请降级为长按（
touchstart+setTimeout）
菜单关闭后必须 remove()，不能只设 display: none
表格里频繁右键，如果每次只隐藏菜单而不移除 DOM，残留节点会累积：拦截后续点击、影响焦点管理、甚至让屏幕阅读器读出已失效菜单项。
安全关闭方式：
- 菜单项点击后：调用
menuEl.remove()，并清空所有临时事件监听（如document.addEventListener('click', closeHandler)） - ESC 键关闭：监听
keydown，判断e.key === 'Escape'，然后menuEl.remove() - 外部点击关闭：监听
document.click，用e.target.closest('.custom-menu') === null判断是否点在外面 - 特别注意：表格里
input或contenteditable单元格右键时，别拦掉粘贴功能——加白名单过滤：if (e.target.matches('input, textarea, [contenteditable]')) return;
最易忽略的是 iframe 表格：右键目标在 iframe 里，主页面监听完全无效。必须等 iframe 加载后，用 iframe.contentDocument.addEventListener('contextmenu', ...) 单独处理。
