(keyup.enter) 觸發兩次 | Angular

Question

所以我有一個 HTML 在按鈕/輸入點擊時具有遞增和遞減功能。 按鈕（單擊）按預期工作，但是在（keyup.enter）增量 function 被觸發兩次。

當我在鍵盤上按 Tab + enter (keyup.enter) 和 (click) 時，兩個事件都會被觸發，這會調用 function 兩次

<div class="container">
<div class="row">
    <div class="col-sm" style="text-align:center">
        <h2> Increment/Decrement Functionality</h2>
    </div>
</div>
<div class="row" style="margin: 40px">
    <div class="col-sm">
        Increment All <button  (click)="incrementAll()" (keyup.enter)="incrementAll()"> +
        </button>
        Decrement All
        <button (click)="decrementAll()" (keyup.enter)="decrementAll()"> - </button>
    </div>
</div>
<div class="row" style="margin: 40px">
    <div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
        <input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
        <button (click)="decrement(i)" (keyup.enter)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
  </button>
        <button (click)="increment(i)"
     (keyup.enter)="increment(i)"> +
  </button>
    </div>
</div>

Typescript：

increment(index) {
    this.countNumbers[index].number += 1;
}

decrement(index) {
    if (this.countNumbers[index].number > 0) {
        this.countNumbers[index].number -= 1;
    }
}

incrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
  this.countNumbers[i].number += 1;
}
}
decrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
  if (this.countNumbers[i].number > 0) {
    this.countNumbers[i].number -= 1;
  }
}

演示

Answer 1

默認情況下，HTML 按鈕可以通過回車“單擊”（例如，對於使用鍵盤導航表單的人）。

在你的代碼中，如果一個按鈕被聚焦（如果你之前點擊過它），然后你按下回車鍵，這些事情就會發生：

1. 默認的“點擊”事件已注冊，因此您會得到一個增量。
2. 您的(keyup.enter)="incrementAll()"已注冊，因此您獲得了第二個增量。

一個快速的解決方法是擺脫(keyup.enter)="incrementAll()" ：

<div class="container">
    <div class="row">
        <div class="col-sm" style="text-align:center">
            <h2> Increment/Decrement Functionality</h2>
        </div>
    </div>
    <div class="row" style="margin: 40px">
        <div class="col-sm">
            Increment All <button  (click)="incrementAll()"> +
            </button>
            Decrement All
            <button (click)="decrementAll()"> - </button>
        </div>
    </div>
    <div class="row" style="margin: 40px">
        <div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
            <input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
            <button (click)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
      </button>
            <button (click)="increment(i)"> +
      </button>
        </div>
    </div>
</div>