在angular2中,输入键触发页面上的任何点击事件?

时间:2021-07-22 03:26:54

In the code below removeSelectedCountry() should be called when the span element is clicked and handleKeyDown($event) should be called when there is a keydown event on the div.

在下面的代码中,当单击span元素时应调用removeSelectedCountry(),并且当div上有keydown事件时应调用handleKeyDown($ 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" (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.

但每次按下回车键时都会调用removeSelectedCountry()。

To make the code work I had to change the click event to mousedown event. It works fine now.

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

Can anyone explain why enter key would trigger 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

添加类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
    }    
}

5 个解决方案

#1


89  

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

对于ENTER键,为什么不使用(keyup.enter):

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

#2


22  

Use (keyup.enter).

使用(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.

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

#3


10  

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.

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

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

Big thanks to DeborahK!

非常感谢DeborahK!

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

Angular2 - Enter Key执行表单上的第一个(单击)功能

#4


5  

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

This works for me!

这适合我!

#5


3  

<form (keydown)="someMethod($event)">
     <input type="text">
</form>
someMethod(event:any){
   if(event.keyCode == 13){
      alert('Entered Click Event!');
   }else{
   }
}

#1


89  

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

对于ENTER键,为什么不使用(keyup.enter):

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

#2


22  

Use (keyup.enter).

使用(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.

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

#3


10  

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.

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

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

Big thanks to DeborahK!

非常感谢DeborahK!

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

Angular2 - Enter Key执行表单上的第一个(单击)功能

#4


5  

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

This works for me!

这适合我!

#5


3  

<form (keydown)="someMethod($event)">
     <input type="text">
</form>
someMethod(event:any){
   if(event.keyCode == 13){
      alert('Entered Click Event!');
   }else{
   }
}