Angular(单击)事件在 Enter 上按发送鼠标事件而不是键盘事件

Question

我有这个html按钮：

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

我在打字稿中有这个：

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

问题是，当我在聚焦时按此按钮上的 Enter 时，它将触发鼠标事件而不是键盘事件：

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

为什么它会在回车时触发鼠标事件？改变它的最佳方法是什么？该按钮绝对应该在键盘和鼠标上工作，但由于一些跟踪和 a11y 在后台运行，这会导致不正确的行为。

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

Answer 1

默认

的浏览器行为是在焦点按钮时按下 Enter 键时触发单击事件，或者如果按钮的类型为 submit 并在窗体的某些元素聚焦时按下 Enter 键。

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

Answer 2

这可能与浏览器背后的 JS 引擎有关，该引擎认为在按下 Enter 或空格等键时单击按钮？

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