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

Question

我有这个 html 按钮:

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

我在 typescript 中有这个:

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

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

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

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

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

Answer 1

当按钮聚焦时按下回车键或类型为 submit 时，触发点击事件是浏览器的默认行为。并且在聚焦表单的某些元素时按下回车键。

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