Does Enter key trigger a click event

Question

In the code below removeSelectedCountry   should be called when a span element is clicked and handleKeyDown  event  should be called when there is a keydown event on a div    Component       selector   wng-country-picker       template         lt ul class  CountryPicker-selected   ngIf  selectedCountries length  gt  0  gt       lt li  ngFor  let country of selectedCountries  gt           lt span class  Pill Pill--primary   click   removeSelectedCountry country   gt             country name             lt  span gt       lt  li gt       lt  ul gt        lt div  keydown   handleKeyDown  event   class  CountryPicker-input  gt  lt  div gt     providers   CUSTOM VALUE ACCESSOR       But removeSelectedCountry   is called every time Enter key is pressed     To make the code work  I had to change the click event to mousedown event  It works fine now   Can anyone explain why the Enter key would trigger the click event    Component       selector   wng-country-picker       template         lt ul class  CountryPicker-selected   ngIf  selectedCountries length  gt  0  gt       lt li  ngFor  let country of selectedCountries  gt           lt span class  Pill Pill--primary   mousedown   removeSelectedCountry country   gt             country name             lt  span gt       lt  li gt       lt  ul gt        lt div  keydown   handleKeyDown  event   class  CountryPicker-input  gt  lt  div gt     providers   CUSTOM VALUE ACCESSOR       Adding class snipppet   export class CountryPickerComponent    private selectedCountries  CountrySummary     new Array     private removeSelectedCountry country  CountrySummary          check if the country exists and remove from selectedCountries     if  this selectedCountries filter ctry   gt  ctry code     country code  length  gt  0                var index   this selectedCountries indexOf country           this selectedCountries splice index  1           this selectedCountryCodes splice index  1            private handleKeyDown event  any        if  event keyCode    13                  action           else if  event keyCode    40                   action             else if  event keyCode    38                   action

User · Answer

What personally me fount usable for me is:

(mousedown)="callEvent()" (keyup.enter)="$event.preventDefault()

keyup.enter prevents the event from triggering on keyup, but it still occurs for keydown, that works for me.

User · Answer

Here is the correct SOLUTION  Since the button doesn t have a defined attribute type  angular maybe attempting to issue the keyup event as a submit request and triggers the click event on the button    lt button type  button      gt  lt  button gt    Big thanks to DeborahK   Angular2 - Enter Key executes first  click  function present on the form

User · Answer

lt form  keydown   someMethod  event   gt        lt input type  text  gt   lt  form gt      someMethod event any      if event keyCode    13         alert  Entered Click Event         else

User · Answer

Use  keyup enter    Angular can filter the key events for us  Angular has a special syntax for keyboard events  We can listen for just the Enter key by binding to Angular s keyup enter pseudo-event

User · Answer

For angular 6 there is a new way of doing it  On your input tag add    keyup enter   keyUpFunction  event     Where keyUpFunction  event  is your function

User · Answer

Component     selector   key-up3     template         lt input  box  keyup enter   doSomething  event   gt       lt p gt   values   lt  p gt         export class KeyUpComponent v3     doSomething e        alert e           This works for me

User · Answer

For ENTER key  why not use  keyup enter     Component     selector   key-up3     template         lt input  box  keyup enter   values box value  gt       lt p gt   values   lt  p gt         export class KeyUpComponent v3     values

[angular] Does Enter key trigger a click event?

Examples related to angular

Examples related to dom-events