如何找到一个按钮的x和y坐标，而使用键盘导航?

Question

我正在显示一个下拉菜单，它是在点击图标时呈现的。右键单击另一个div时也会呈现相同的下拉列表。它使用鼠标单击事件的x和y坐标来将下拉框呈现在正确的位置。这是图标的代码:

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

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

是否有一种方法，我可以以某种方式得到按钮的位置，当我做键盘导航?

Answer 1

我使用:

document.activeElement.getBoundingClientRect();

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