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: `     <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">     <li *ngFor="let country of selectedCountries">         <span class="Pill Pill--primary" (click)="removeSelectedCountry(country)">         {{ country.name }}         </span>     </li>     </ul>      <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div> `, 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: `     <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">     <li *ngFor="let country of selectedCountries">         <span class="Pill Pill--primary" (mousedown)="removeSelectedCountry(country)">         {{ country.name }}         </span>     </li>     </ul>      <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div> `, 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 => ctry.code === country.code).length > 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     }     } 

Answer 1

For ENTER key, why not use (keyup.enter):

@Component({   selector: 'key-up3',   template: `     <input #box (keyup.enter)="values=box.value">     <p>{{values}}</p>   ` }) export class KeyUpComponent_v3 {   values = ''; }