Enter上的角度（单击）事件按发送MouseEvent而不是KeyboardEvent

Question

我有这个html按钮：

<button
    type='button'
    class="button-name" 
    (click)="change($event)"
    [disabled]='disabledButton'
>

我在打字稿中有这个字

change(event: Event) {
    console.log(event);
}

问题是当我在焦点对准此按钮时按ENTER键时，它将触发MouseEvent而不是Keyboard Event：

MouseEvent {type: "click", target: ..., ...}

为什么在Enter时触发MouseEvent？改变它的最好方法是什么？该按钮绝对可以同时在键盘和鼠标上使用，但是由于某些跟踪和后台运行，这会导致行为不正确。

感谢任何可以进一步解释为什么是MouseEvent的人，并提出一些解决方案。

Answer 1

这是默认的浏览器行为，当按钮处于焦点状态时按下Enter键或它的类型为submit并在表单的某些元素处于焦点状态时按下Enter键时，会触发单击事件。

但是您可以轻松地检测到它是否是用户的实际点击，因为鼠标事件的event.detail拥有实际点击计数，否则始终为零。参见UIEvent.detail。

Answer 2

这可能与浏览器后面的JS引擎有关，该浏览器认为当按下回车键或空格键时是否单击了该按钮？

无论如何，要解决该问题，只需同时绑定String和click / keydown.enter