Angular (click) 事件 on Enter press 发送 MouseEvent 而不是 KeyboardEvent

Question

我有这个 html 按钮：

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

我在打字稿中有这个：

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

问题是当我在这个按钮上按下 ENTER 键时，它会触发 MouseEvent 而不是键盘事件：

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

为什么它会在输入时触发 MouseEvent？改变它的最佳方法是什么？该按钮肯定适用于键盘和鼠标，但由于某些跟踪和背景中的 a11y 运行，这会导致不正确的行为。

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

Answer 1

浏览器的默认行为是在按钮获得焦点时按下回车键，或者如果它是 submit 类型并且在窗体的某些元素获得焦点时按下回车键.

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

Answer 2

这可能与浏览器背后的 JS 引擎有关，它认为当按下 enter 或 space 等键时按钮会被点击？

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

Angular (click) event on Enter press sending MouseEvent instead KeyboardEvent