В угловом2 вводит ключевой триггер любое событие click на странице?

Question

В приведенном ниже коде removeSelectedCountry() следует вызывать, когда элемент span нажимается, а handleKeyDown($event) следует вызывать, когда на div находится событие keydown.

@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] 
}) 

Но removeSelectedCountry() вызывается каждый раз, когда вводится клавиша ввода.

Чтобы сделать код работы, мне пришлось изменить событие click на событие mousedown. Теперь он отлично работает.

Может ли кто-нибудь объяснить, зачем вводить ключ, вызывает событие click?

@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] 
}) 

Добавление класса 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

Для клавиши ENTER, почему бы не использовать (keyup.enter):

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

Answer 2

Использование (keyup.enter).

Угловой может фильтровать ключевые события для нас. Угловой имеет специальный синтаксис для событий клавиатуры. Мы можем прослушать только клавишу Enter, привязав к псевдо-событию Angular's keyup.enter.

Answer 3

<form (keydown)="someMethod($event)"> 
    <input type="text"> 
</form> 

someMethod(event:any){ 
    if(event.keyCode == 13){ 
     alert('Entered Click Event!'); 
    }else{ 
    } 
} 

Answer 4

Вот правильная РЕШЕНИЕ! Поскольку кнопка не имеет определенного типа атрибута, возможно, попытка углового, возможно, выполнить событие keyup в качестве запроса на отправку и инициирует событие клика на кнопке.

<button type="button" ...></button> 

Большое спасибо DeborahK!

Angular2 - Enter Key executes first (click) function present on the form

Answer 5

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

Это работает для меня!