Enter 키를 누르면 클릭 이벤트가 트리거됩니까?

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()는 키를 누를 때마다 호출됩니다.

코드가 작동하도록 하기 위해, 저는 그것을 바꿔야 했습니다.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]
})

클래스 스니펫 추가 중:

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 = '';
}

올바른 솔루션입니다! 버튼에 정의된 속성 유형이 없기 때문에 각진이 키업 이벤트를 제출 요청으로 발급하려고 시도하고 버튼에서 클릭 이벤트를 트리거할 수 있습니다.

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

데보라 K에게 큰 감사를 드립니다!

Angular2 - Enter Key가 양식에 있는 첫 번째(클릭) 기능을 실행합니다.

사용하다(keyup.enter).

Angular는 주요 이벤트를 필터링할 수 있습니다.Angular에는 키보드 이벤트에 대한 특수 구문이 있습니다.Angular's에 바인딩하여 Enter 키만 들을 수 있습니다.keyup.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이벤트가 키업 시 트리거되지 않도록 하지만 키다운 시에도 발생합니다.

언급URL : https://stackoverflow.com/questions/37936961/does-enter-key-trigger-a-click-event