Chrome中HTML dialog元素cancel事件未触发的解决方法问询

问题现象 #

在Chrome浏览器中，使用原生<dialog>的showModal()打开弹窗后：

• 立即按Escape键：仅触发close事件，cancel事件不执行
• 先与弹窗交互（点击弹窗区域、按Tab切换焦点等）后按Escape键：先触发cancel，再触发close

这种不一致的行为会导致依赖cancel事件拦截浏览器默认关闭逻辑的场景失效——比如需要为所有关闭操作添加统一退出动画时，无法拦截刚打开弹窗就按Escape的情况。

问题根源 #

Chrome对原生<dialog>的实现逻辑是：只有当弹窗自身或内部元素获得焦点时，才会将Escape键的关闭操作关联到cancel事件。刚调用showModal()时，焦点仍停留在触发弹窗的外部元素上，此时按Escape会直接触发关闭流程，跳过cancel事件。

可行解决方案 #

在弹窗打开后，主动让弹窗内部的可聚焦元素获得焦点，或者给弹窗本身设置可聚焦属性并聚焦，强制Chrome将弹窗标记为“已交互”状态，从而确保cancel事件始终触发。

优化后的代码实现 #

const dialog = document.getElementById("dialog");
const open = document.getElementById("open");
const close = document.getElementById("close");

class Dialog {
  constructor(options) {
    this.dialog = options.dialog;
    options.open.addEventListener("click", () => this.open());
    options.close.addEventListener("click", () => this.close());
    
    // 拦截cancel事件，统一走自定义关闭逻辑
    this.dialog.addEventListener("cancel", (e) => {
      e.preventDefault();
      this.close();
    });
  }
  
  open() {
    this.dialog.showModal();
    // 主动聚焦弹窗内的可聚焦元素，确保cancel事件能触发
    const firstFocusable = this.dialog.querySelector(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    
    if (firstFocusable) {
      firstFocusable.focus();
    } else {
      // 弹窗内无默认可聚焦元素时，临时设置tabindex让弹窗可聚焦
      this.dialog.setAttribute('tabindex', '-1');
      this.dialog.focus();
      // 关闭后移除tabindex，避免影响其他交互
      this.dialog.addEventListener('close', () => {
        this.dialog.removeAttribute('tabindex');
      }, { once: true });
    }
  }
  
  close() {
    this.dialog.classList.add("closeAnimation");
    this.dialog.addEventListener("animationend", () => {
      this.dialog.close();
      this.dialog.classList.remove("closeAnimation");
    }, { once: true });
  }
}

new Dialog({dialog, open, close});

逻辑说明 #

1. 聚焦内部元素：弹窗打开后，优先找到内部第一个可聚焦元素（比如按钮、输入框等）并聚焦，此时焦点进入弹窗区域，Chrome会自动绑定Escape键到cancel事件。
2. 处理无聚焦元素场景：如果弹窗内没有默认可聚焦元素，通过给<dialog>添加tabindex="-1"使其成为可聚焦元素，聚焦后同样能触发cancel事件，关闭后移除该属性避免干扰其他逻辑。

验证结果 #

修改后，无论打开弹窗后是否立即按Escape，都会触发cancel事件：

• 浏览器默认的关闭行为被e.preventDefault()阻止
• 自动执行自定义的close()方法，触发退出动画，动画完成后再关闭弹窗

这样就实现了所有关闭场景（包括Escape键、屏幕阅读器操作等）的统一处理。

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