关键不是监听table元素的contextmenu事件，而是绑定在tr上并用event.currenttarget.dataset.rowid获取行数据；需preventdefault()阻止默认菜单，全局单例菜单动态定位，支持多端交互与状态同步。
右键菜单触发时如何获取被点击的表格行数据
关键不是监听 table 元素的 contextmenu 事件，而是绑定在 tr 上——否则右键任意空白处也会触发，且拿不到当前行上下文。必须阻止默认右键行为：event.preventDefault()，否则浏览器原生菜单会覆盖你的自定义菜单。
常见错误是直接给 tbody 绑事件然后用 event.target.closest('tr') 查找，但当单元格内有嵌套元素（如按钮、图片）时，closest 可能返回 null 或错行。稳妥做法是在 tr 上统一加 data-row-id，并在事件回调里直接读取 event.currentTarget.dataset.rowId。
- 确保每行
tr都有唯一标识，比如<tr data-row-id="1024"> <li>若表格支持多选，右键前应先记录已选行（例如维护一个 <code>selectedRows数组），右键菜单操作才可作用于“当前行 + 已选行” - 不要依赖
event.target的文本内容或 innerHTML 去解析数据，易受 HTML 结构变更影响 - 菜单宽度超窗口右侧时，自动左偏：计算
clientX + menuWidth > window.innerWidth，则left = clientX - menuWidth - 菜单高度超底部时，向上展开：比较
clientY + menuHeight与window.innerHeight，必要时改用bottom定位 - 菜单关闭逻辑必须包含：点击菜单外区域、按
Esc键、以及菜单项点击后自动隐藏 - 禁用菜单项要基于当前选中行的状态动态判断，比如“启用”菜单项仅在所有选中行
status === 'disabled'时可用 - 提交前加 loading 状态，并禁用菜单项，防止连点导致重复请求
- 后端返回成功后，务必同步更新本地数据和选中状态，否则下一次右键看到的仍是旧数据
- 长按阈值设为 500ms，太短易误触，太长体验差
- 菜单容器必须加
role="menu"，每个菜单项加role="menuitem"和tabindex="0" - 不要用
pointer-events: none隐藏菜单，而用visibility: hidden或display: none，否则屏幕阅读器无法跳过
右键菜单 DOM 插入与定位避坑点
菜单不能写死在 HTML 里（否则多行同时右键会复用同一 DOM 节点，位置错乱），也不能每次新建 div 后反复 appendChild 到 body —— 容易内存泄漏且未清理时右键多次会残留多个菜单。
推荐做法：全局只保留一个 context-menu 元素，首次加载时创建并设 display: none，每次右键时动态设置 style.left 和 style.top，再 show()。定位要用 event.clientX / event.clientY，而非 pageX / pageY（滚动时会偏移）。
批量操作时如何避免状态不同步和重复提交
用户右键某行后选择“删除选中项”，如果此时表格数据由前端维护（非纯渲染），就容易出现 UI 与内存数据不一致：比如删除后没及时从 selectedRows 数组中剔除已删 ID，下次右键再点“批量禁用”就会对不存在的行发请求。
根本解法是把操作逻辑和数据源解耦：所有批量动作最终都调用同一个函数 performBatchAction(action, rowIds)，该函数内部先校验 rowIds 是否仍存在于当前数据列表，再过滤出有效 ID，最后发请求。不要在菜单项 click 回调里直接写 fetch。
移动端兼容与无障碍访问注意事项
桌面端右键菜单在手机上根本无法触发，contextmenu 事件在 iOS Safari 和多数安卓浏览器中默认被忽略或转为长按事件。不能假设所有设备都有右键能力。
实际方案是：检测 'ontouchstart' in window，若有则改用长按（touchstart + setTimeout）模拟右键；同时为键盘用户保留 Shift+F10 快捷键支持（标准上下文菜单快捷键）。菜单本身需支持 Tab 导航、Enter 触发、Escape 关闭。
右键菜单看似简单，真正难的是状态一致性、跨设备行为收敛、以及和现有数据流的无缝咬合——很多团队卡在“菜单能弹出来”，却没意识到后续的批量状态管理才是核心成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
