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

Question

I have this html button:

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

I have this in typescript:

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

The problem is that when I hit ENTER on this button when is focused, it will trigger MouseEvent instead of Keyboard Event:

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

Why does it fire MouseEvent on Enter? What's the best way to change it? The button should definitely works on both keyboard and mouse but because of some tracking and a11y running in the background, this results in incorrect behaviour.

Thanks anyone who can explain further why it is MouseEvent and suggest some solution.

cyr_x · Accepted Answer · 2019-06-19 06:30:15Z

8

It's the default browser behavior to trigger a click event when the enter key is pressed while a button is focused or if it's of type submit and the enter key is pressed while some element of a form is focused.

But you can easily detect if it's an actual click by the user because the event.detail of a mouse event holds the actual click count otherwise it's always zero. See UIEvent.detail.

answered Jun 19, 2019 at 6:30

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chetan Oswal Over a year ago

This really worked for me. I checked event.detail and if found 0 I returned back:- if(event.detail == 0) return;

user4676340 · Accepted Answer · 2019-06-19 06:32:25Z

2

That probably has to do with the JS engine behind the browser, that considers the button to be clicked when a key like enter or space is pressed ?

Anyway, to resolve that, simply bind both click and keydown.enter/keyup.enter

answered Jun 19, 2019 at 6:32

user4676340

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related