Enter键会触发点击事件吗？

在下面的代码中，removeSelectedCountry()当span元素被单击handleKeyDown($event)时应调用，在上发生keydown事件时应调用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]
})

但是removeSelectedCountry()每次Enter按键都被调用。

为了使代码正常工作，我不得不将click事件更改为mousedown事件。现在工作正常。

谁能解释为什么Enter键会触发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]
})

添加课程片段：

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
    }    
}

对于ENTER键，为什么不使用(keyup.enter)：

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

这是正确的解决方案！由于按钮没有定义的属性类型，Angular可能会尝试将keyup事件作为提交请求发出，并触发按钮上的click事件。

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

非常感谢DeborahK！

Angular2-Enter键执行表单上存在的第一个（单击）功能

使用(keyup.enter)。

Angular可以为我们过滤关键事件。Angular具有用于键盘事件的特殊语法。通过绑定到Angular的keyup.enter伪事件，我们可以只侦听Enter键。

对于角度6，有一种新的处理方法。在您的输入标签上添加

(keyup.enter)="keyUpFunction($event)"

keyUpFunction($event)你的职能在哪里。

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

这对我有用！

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

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

我个人认为对我有用的是：

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

keyup.enter 可以防止事件在键盘输入时触发，但是对于键盘按下仍然会发生，这对我来说很有效。