Angular中如何绕过音频元素的ESC按键捕获以关闭对话框？

问题场景 #

当使用带controls属性的<audio>元素时，点击播放按钮后按下ESC键，音频元素会优先捕获该按键事件。在Angular应用中，若该音频元素位于对话框内，会导致对话框无法接收到ESC键事件，无法触发关闭逻辑。目前已尝试在音频播放时调用audio.blur()的方法，虽能解决问题，但会改变元素焦点，希望寻求不修改焦点的替代方案。

可行解决方案 #

方案1：阻止音频元素的ESC事件冒泡

直接在音频元素上监听keydown事件，当检测到ESC键时，阻止事件向上冒泡，让上层对话框能正常捕获该事件。

在Angular中实现方式：

1. 模板中绑定事件：

<audio controls src="你的音频地址" (keydown)="handleAudioKeydown($event)"></audio>

2. 组件类中编写处理逻辑：

handleAudioKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    event.stopPropagation(); // 阻止事件冒泡
    this.dialogRef.close(); // 直接调用对话框关闭方法
  }
}

方案2：在捕获阶段监听对话框的ESC事件

如果音频元素在冒泡阶段拦截了事件，可以在对话框容器的捕获阶段监听ESC事件，优先获取事件控制权。

组件中实现示例：

import { AfterViewInit, OnDestroy } from '@angular/core';

export class YourDialogComponent implements AfterViewInit, OnDestroy {
  private handleDialogKeydown = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
      this.dialogRef.close();
    }
  };

  ngAfterViewInit() {
    const dialogContainer = document.querySelector('.你的对话框容器类名');
    if (dialogContainer) {
      // 第三个参数true表示在捕获阶段监听
      dialogContainer.addEventListener('keydown', this.handleDialogKeydown, true);
    }
  }

  ngOnDestroy() {
    const dialogContainer = document.querySelector('.你的对话框容器类名');
    if (dialogContainer) {
      dialogContainer.removeEventListener('keydown', this.handleDialogKeydown, true);
    }
  }
}

方案3：利用Angular CDK Dialog的内置事件流

若使用Angular CDK的Dialog组件，可直接通过其内置的事件流处理ESC键逻辑，无需操作音频元素：

import { DialogRef } from '@angular/cdk/dialog';

constructor(private dialogRef: DialogRef) {
  this.dialogRef.keydownEvents().subscribe((event) => {
    if (event.key === 'Escape') {
      this.dialogRef.close();
    }
  });
}

关于audio.blur()方案的说明 #

使用audio.blur()虽能让焦点离开音频元素，使ESC事件被上层捕获，但会破坏原生音频控件的键盘交互体验——用户原本可通过键盘操作播放/暂停、音量调节等功能，blur后这些操作会失效，影响页面可访问性，因此不推荐作为首选方案。

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