如何在使用键盘导航时找到按钮的 x 和 y 坐标？

Question

我正在显示一个在单击图标时呈现的下拉菜单。右键单击另一个 div 也会呈现相同的下拉列表。它需要鼠标单击事件的 x 和 y 坐标才能在正确的位置呈现下拉菜单。这是图标的代码：

<Icon onClick={this.handleOnClick} onKeyDown={this.handleOnClick}/>

当我进行键盘导航并在图标上按 Enter 时，会调用下拉菜单的渲染函数，但由于事件没有 X 和 Y 坐标，因此下拉菜单会在页面左上角 ( 0, 0)。

当我进行键盘导航时，有什么方法可以获取按钮的位置吗？

Answer 1

我得到了这个工作使用：

document.activeElement.getBoundingClientRect();

在 Key 事件中，我调用了这个方法。这个方法给出了一个包含 x 和 y 坐标以及高度、宽度和其他此类属性的对象