Angular如何获取Enter激活的表格行上下文菜单坐标以正确定位

架构老林

2026-10-1

解决方案

核心逻辑是不依赖鼠标事件的坐标参数，直接从事件触发目标元素本身获取位置信息，适配鼠标、键盘两种触发场景。

1. 修改onrightClick回调逻辑

直接在现有的回调函数中，通过getBoundingClientRect()获取触发元素的视口坐标，用于定位菜单：

onrightClick(event: MouseEvent | KeyboardEvent, journalEntry: any): void {
  event.preventDefault();
  // 存储当前选中行数据，供后续菜单操作使用
  this.currentActiveEntry = journalEntry;
  // 获取触发事件的td元素
  const triggerElement = event.target as HTMLElement;
  // 读取元素的位置信息
  const triggerRect = triggerElement.getBoundingClientRect();
  
  // 适配不同的菜单定位规则，示例为定位在触发元素的正下方，可自行调整偏移量
  // 若菜单为fixed定位，直接使用以下坐标
  this.contextmenuX = triggerRect.left;
  this.contextmenuY = triggerRect.bottom;
  // 若菜单为absolute定位，需要叠加页面滚动偏移，替换为以下两行即可
  // this.contextmenuX = triggerRect.left + window.scrollX;
  // this.contextmenuY = triggerRect.bottom + window.scrollY;

  // 打开上下文菜单
  this.contextmenu = true;

  // 可选可访问性优化：菜单打开后自动聚焦到第一个选项
  setTimeout(() => {
    const firstMenuOption = document.querySelector('.contextmenu .list-group-item:first-child span') as HTMLElement;
    firstMenuOption?.focus();
  }, 0);
}