HTML5 dialog回车键默认关闭问题：如何拦截监听其键盘事件

1. HTML5 dialog默认键盘事件的拦截层级 #

原生HTML5 <dialog> 元素的键盘事件默认拦截逻辑是浏览器在 DOM事件捕获阶段 实现的，优先级远高于普通开发者在冒泡阶段绑定的事件监听器。
针对回车键的默认关闭逻辑，本质是浏览器对 <form method="dialog"> 内置的默认提交行为：当dialog处于激活状态时，按下回车键会默认触发form内第一个type="submit"的按钮的点击事件，进而触发dialog的close逻辑，这个行为在keydown阶段就会执行完成，因此你绑定的keyup事件自然捕获不到对应的触发逻辑。

2. 捕获键盘事件的实现方案 #

• 优先在事件捕获阶段绑定keydown监听器，在浏览器触发默认行为之前拦截事件，addEventListener第三个参数设为true即可启用捕获阶段监听：

const yourDialog = document.querySelector('dialog');
yourDialog.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    // 阻止浏览器默认关闭逻辑
    event.preventDefault();
    event.stopImmediatePropagation();
    // 此处填入你的自定义处理代码
  }
}, true);

• 如果你使用的是经过封装的第三方dialog组件，需要确认组件是否使用了Shadow DOM做样式隔离，这种情况需要先获取到组件Shadow Root内部的原生dialog元素，再绑定上述监听器才能生效。
• 额外补充：如果dialog内部包含form表单，也可以直接阻止form的默认提交行为，从根源避免回车键触发的自动关闭：

yourDialog.querySelector('form')?.addEventListener('submit', (e) => {
  e.preventDefault();
  // 你的自定义提交逻辑
});

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