在Blazor Web Assembly中如何获取鼠标坐标定位行编辑菜单

推荐优先使用触发元素相对定位实现，比直接计算鼠标坐标容错性更高，不会因为用户点击位置在图标上的偏移导致菜单错位。

方案1：基于触发图标元素的位置计算（推荐） #

实现逻辑：给每个三点图标绑定点击事件，触发时通过event.currentTarget拿到当前点击的图标DOM元素，调用getBoundingClientRect()获取元素坐标后结合滚动偏移计算菜单位置，额外做边界判断避免菜单弹出视口外。

function handleMenuOpen(e) {
  const triggerEl = e.currentTarget;
  const rect = triggerEl.getBoundingClientRect();
  // 获取页面滚动偏移量
  const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
  const scrollY = window.pageYOffset || document.documentElement.scrollTop;
  
  // 菜单默认在图标右下方对齐，偏移量可自定义调整
  let menuLeft = rect.left + scrollX;
  let menuTop = rect.top + rect.height + scrollY + 2; // 2px为图标和菜单的间隙
  
  // 边界检测：避免菜单超出可视区域
  const menuWidth = 200; // 可动态获取你的菜单实际宽度
  const menuHeight = 120; // 可动态获取你的菜单实际高度
  const viewportWidth = document.documentElement.clientWidth;
  const viewportHeight = document.documentElement.clientHeight;
  
  // 右侧超出视口则改为左对齐图标
  if (menuLeft + menuWidth > viewportWidth + scrollX) {
    menuLeft = rect.left + scrollX + rect.width - menuWidth;
  }
  // 底部超出视口则改为向上弹出
  if (menuTop + menuHeight > viewportHeight + scrollY) {
    menuTop = rect.top + scrollY - menuHeight - 2;
  }
  
  // 给菜单设置定位
  const menuEl = document.querySelector('.edit-menu');
  menuEl.style.left = `${menuLeft}px`;
  menuEl.style.top = `${menuTop}px`;
  menuEl.style.display = 'block';
}

方案2：基于鼠标点击坐标计算 #

如果需要菜单严格跟随鼠标点击位置弹出，直接从点击事件中取坐标即可：

function handleMenuOpen(e) {
  const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
  const scrollY = window.pageYOffset || document.documentElement.scrollTop;
  
  // e.clientX/e.clientY是鼠标相对于视口的坐标，加滚动偏移得到页面绝对坐标
  const menuLeft = e.clientX + scrollX + 4; // 4px偏移避免菜单挡住光标
  const menuTop = e.clientY + scrollY + 4;
  
  // 可复用方案1的边界检测逻辑
}

注意事项 #

• 菜单元素需要设置position: absolute，并且确保它的父级没有非static的定位，否则会相对于父级偏移而非整个页面
• 如果你的grid组件是虚拟滚动实现的，需要额外加上滚动容器的偏移量计算
• 点击页面其他区域关闭菜单的逻辑，可全局绑定click事件判断点击目标是否在菜单或触发图标外

内容的提问来源于stack exchange，提问作者Shushan