Javascript Chrome中两次执行事件的角度函数

我有一个输入字段，它在

（blur）

和

（keydown.enter）

两个事件中执行一个函数，在这两种情况下，函数都是在服务器中保存数据并切换

的输入，现在的问题是

（keydown.enter）

在firefox中，函数是触发器，但在chrome中，函数是触发器两次，而我应该是唯一的触发器

模板

<input type="text" class="text-field"
  [(ngModel)]="column[item.id]" (blur)="setValue(nameInputDE, 'textDE', column)"
  (keydown.enter)="setValue(nameInputDE, 'textDE', column)"
  *ngIf="column.editModeNameDE && item.id == 'textDE'" #nameInputDE />

组件。ts

  public setValue(item, attr: string, col: KanbanColumn) {
    if (attr == 'myBoardColumnMapping' && item.id == col[attr]) {
      return;
    }
    this.log.trace('setValue(item: ' + item.id + ', attr: ' + attr + ', colID: ' + col.dataField + ')');

    let newVal;

    switch (attr) {
      case 'myBoardColumnMapping':
        col.myBoardColumnMapping = item.id;
        break;
      case 'text':
        col.text = item.value;
        break;
      case 'textDE':
        col.textDE = item.value;
        break;
      case 'wipLimit':
        col.wipLimit = item.value ? item.value : null;
        // if the value is invalid -> do not remove the input
        if (newVal < 1 || newVal > 100) {
          return;
        }
        break;
    }
    this.storeData(col);
  }

publicsetvalue（项，属性：字符串，列：看板列）{
if（attr==“myBoardColumnMapping”&&item.id==col[attr]）{
返回；
}
this.log.trace（'setValue（项：'+item.id+'，属性：'+attr+'，colID:'+col.dataField+'））；
让纽瓦尔；
开关（attr）{
案例“myBoardColumnMapping”：
col.myBoardColumnMapping=item.id；
打破
案例“文本”：
col.text=item.value；
打破
案例“textDE”：
col.textDE=item.value；
打破
案例“wipLimit”：
col.wipLimit=item.value？item.value：空；
//如果值无效->不要删除输入
如果（newVal<1 | | newVal>100）{
返回；
}
打破
}
这是存储数据（col）；
}

到目前为止，我还不知道如何解决这个问题，firefox只接收输入的第一个事件，在这种情况下

（keydown.enter）

，但是Chrome会先接收两个

（keydown.enter）

，然后执行两次

（blur）

，我知道如何避免这种情况发生

在创建侦听事件的指令的情况下，结果是相同的，因为在chrome中，两个事件都被触发，chrome仍在执行该函数两次。

我创建了一个粗略的示例，可以向您展示如何使用rxjs在只执行其中的第一个事件的同时，监听按键输入事件和模糊事件来完成此操作

您可以使用更多的

一般逻辑是：

  const listenToKeydownAndBlur = merge(
    fromEvent(this.theInput.nativeElement, 'keydown').pipe(
      filter((ev: any) => {
        return ev.code === 'Enter';
      }),
      tap(ok => {
        this.submitType = 'keydown enter event';
        console.log('keydown enter');
      })
    ),
    fromEvent(this.theInput.nativeElement, 'blur').pipe(
      tap(ok => {
        this.submitType = 'blur event';
        console.log('blur');
      })
    )
  ).pipe(
    first(),
    tap(ok => {
      this.submitted = true
      // Do submit logic!
    })
  )

  listenToKeydownAndBlur.subscribe();

---

您可以考虑使用RXJS运算符，例如，如果输入/参数已经改变，只执行一个事件。难道您不要求它做两次吗？有什么可以阻止模糊和键控事件？这对于RXJS来说是一个很好的用例，比如“亚历山大”StasoSelSkySead，它的想法是只执行函数，不管触发哪个事件。您可能需要考虑类似于同时对这两个事件进行侦听的自定义指令。看这个。或者如前所述，创建类似于RxJS主题的东西并结合运算符来过滤重复事件。可能的重复非常感谢答案，它工作得很好，但在我的情况下并不完全，因为在输入上实现了其他逻辑，但谢谢。RxJS运算符仍然是“更好的”解决方案，而不考虑输入上的其他逻辑。