Angular中如何阻止keydown时focusin事件重复触发？

以下是几个可行的解决思路，根据你的场景选择：

方法一：用标志位过滤keydown触发的focusin #

通过设置临时标志位，跳过keydown操作后触发的focusin事件：

1. 在组件类中添加一个状态变量：

private isKeydownInProgress = false;

2. 给<input-editor>绑定keydown事件，设置标志位并延迟重置：

<input-editor
     [id]="cellId(element.rowId)"
     [value]="format(element)"
     (valueChanged)="quantityChanged($event, element)"
     (focusin)="focusedIn(element, editableCells.Checked)"
     (click)="$event.stopPropagation()"
     (keydown)="markKeydownInProgress()"
>
</input-editor>

3. 实现对应的方法：

markKeydownInProgress() {
  this.isKeydownInProgress = true;
  // 延迟100ms重置，确保focusin事件触发后再恢复状态
  setTimeout(() => {
    this.isKeydownInProgress = false;
  }, 100);
}

focusedIn(element: any, isChecked: boolean) {
  // 如果是keydown触发的focusin，直接跳过
  if (this.isKeydownInProgress) return;
  
  // 这里写你原本的focusin处理逻辑
  // ...
}

方法二：通过FocusEvent对象判断触发来源 #

利用focusin事件的relatedTarget属性，判断焦点是否是从其他元素切换过来的（通常键盘操作会有这个值）：

1. 修改模板，把事件对象传入focusedIn方法：

<input-editor
     [id]="cellId(element.rowId)"
     [value]="format(element)"
     (valueChanged)="quantityChanged($event, element)"
     (focusin)="focusedIn(element, editableCells.Checked, $event)"
     (click)="$event.stopPropagation()"
>
</input-editor>

2. 在方法中过滤键盘触发的焦点切换：

focusedIn(element: any, isChecked: boolean, event: FocusEvent) {
  // 如果焦点是从其他元素切换而来（键盘操作常见场景），跳过逻辑
  if (event.relatedTarget) return;
  
  // 原本的focusin处理逻辑
  // ...
}

方法三：针对特定按键阻止默认行为 #

如果是特定按键（比如Tab、Enter）导致的焦点重复切换，直接阻止默认行为并手动控制焦点：

1. 模板绑定keydown事件并传入事件对象：

<input-editor
     [id]="cellId(element.rowId)"
     [value]="format(element)"
     (valueChanged)="quantityChanged($event, element)"
     (focusin)="focusedIn(element, editableCells.Checked)"
     (click)="$event.stopPropagation()"
     (keydown)="handleKeydown($event)"
>
</input-editor>

2. 实现按键处理逻辑：

handleKeydown(event: KeyboardEvent) {
  // 比如阻止Tab键的默认焦点切换行为
  if (event.key === 'Tab') {
    event.preventDefault();
    // 这里可以手动处理焦点切换，比如定位到下一个可编辑单元格
    // ...
  }
}

额外提示 #

如果<input-editor>是自定义组件，建议检查其内部实现：是否存在多个元素触发focusin并向外冒泡，或者组件内部重复emitfocusin事件的情况。可以在自定义组件内部处理focusin，只在真正的焦点首次进入时向外触发事件，或者阻止事件冒泡。

内容的提问来源于stack exchange，提问作者jesper