使用键盘导航时如何获取按钮的x、y坐标以正确渲染下拉菜单

架构老林

2026-9-29

解决方案

你不需要依赖鼠标事件的坐标来处理所有场景，优先读取触发元素自身的DOM位置即可覆盖键盘触发的场景，同时可以和右键跟随鼠标的场景做逻辑区分：

核心思路

不管是鼠标点击图标还是键盘回车触发点击事件，都可以通过绑定事件的元素本身的位置来定位下拉菜单，仅在右键触发需要跟随鼠标的场景下读取鼠标坐标即可。

代码实现

修改你的handleOnClick处理函数：

handleOnClick = (e) => {
  let menuX, menuY;

  // 右键触发需要跟随鼠标的场景，读取鼠标坐标
  if (e.type === "contextmenu") {
    menuX = e.clientX;
    menuY = e.clientY;
  } else {
    // 点击图标/键盘触发的场景，读取触发元素的位置
    const triggerElement = e.currentTarget;
    const rect = triggerElement.getBoundingClientRect();
    // 可根据业务需求调整定位规则，示例为定位在图标下方左对齐
    menuX = rect.left;
    menuY = rect.bottom;
    // 如果需要相对文档的绝对定位，可以加上页面滚动距离
    // menuX = rect.left + window.scrollX;
    // menuY = rect.bottom + window.scrollY;
  }

  // 后续用menuX、menuY渲染下拉菜单即可
}