Угловое (щелчок) событие при нажатии Enter, отправка MouseEvent вместо KeyboardEvent

Question

У меня есть эта кнопка HTML:

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

У меня есть это в машинописи:

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

Проблема в том, что когда я нажимаю клавишу ВВОД на этой кнопке, когда она находится в фокусе, она вызывает MouseEvent вместо события клавиатуры:

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

Почему он запускает MouseEvent при входе? Какой лучший способ изменить это? Кнопка определенно должна работать как на клавиатуре, так и на мыши, но из-за некоторого отслеживания и работы в фоновом режиме это приводит к некорректному поведению.

Спасибо всем, кто сможет объяснить, почему это MouseEvent, и предложить какое-то решение.

Answer 1

Это, вероятно, связано с движком JS за браузером, который считает, что кнопка нажимается при нажатии клавиши типа enter или пробела?

В любом случае, чтобы решить эту проблему, просто свяжите оба click и keydown.enter / keyup.enter

Answer 2

Это поведение браузера по умолчанию для инициирования события щелчка, когда клавиша ввода нажата, когда кнопка находится в фокусе, или если она имеет тип submit, и клавиша ввода нажата, когда какой-то элемент формы находится в фокусе.

Но вы можете легко определить, является ли это действительным кликом пользователя, потому что event.detail события мыши содержит фактическое количество кликов, в противном случае оно всегда равно нулю. См. UIEvent.detail .