Enter 上的 Angular（点击）事件按下发送 MouseEvent 而不是 KeyboardEvent

Question

我有这个 html 按钮：

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

我在打字稿中有这个：

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

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

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

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

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

Answer 1

浏览器的默认行为是在按钮聚焦时按下回车键时触发点击事件，或者如果它的类型submit和输入键在表单的某些元素聚焦时按下。

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