HTML文档被modal dialog阻塞时的keydown事件捕获与阻塞状态检测

问题场景 #

以下是测试代码：

document.body.addEventListener('keydown', event => console.log(event.key))

<dialog id="dialog">
  <button onclick="dialog.close()" onfocus="this.blur()">Close</button>
</dialog>
<button onclick="dialog.showModal()">Open</button>

出于测试目的，Close按钮在获得焦点时始终执行blur()操作，因此打开dialog时，dialog内无焦点元素。

需要解决两个问题：

1. 如何捕获keydown事件，使其不会传递到dialog外部？
2. 如果无法实现，又该如何检测文档是否被modal dialog阻塞或处于有效inert状态？

解决方案 #

1. 阻止keydown事件传递到dialog外部

当模态dialog通过showModal()打开时，规范要求外部内容处于inert状态，正常情况下外部元素不会接收到键盘事件。但由于你的dialog内无焦点元素，事件可能会“泄漏”到body上。可以通过以下两种方式解决：

• 在dialog上监听keydown并阻止冒泡
  直接给dialog添加keydown事件监听器，调用event.stopPropagation()阻止事件向上传递到body：

  const dialog = document.getElementById('dialog');
  dialog.addEventListener('keydown', (event) => {
    event.stopPropagation();
    // 可在此添加dialog内的按键逻辑，比如Esc关闭dialog
    if (event.key === 'Escape') {
      dialog.close();
    }
  });
  

  这种方式能确保所有按键事件在dialog层级被拦截，不会传到外部的body监听器。

• 利用dialog的模态特性强制拦截
  即使dialog内无焦点，你也可以手动将焦点设置到dialog本身（dialog元素可以接收焦点），这样键盘事件会直接触发在dialog上，而非body：

  dialog.addEventListener('show', () => {
    dialog.focus();
  });
  

  结合上面的keydown监听器，就能彻底阻止事件泄漏。

2. 检测文档是否被modal dialog阻塞或处于inert状态

如果需要判断当前是否有模态dialog激活，或文档部分内容处于inert状态，可以用以下方法：

• 检测模态dialog的存在
  使用:modal CSS伪类匹配所有处于模态状态的dialog，通过检查是否存在这样的元素来判断：

  const hasModalDialog = document.querySelector('dialog:modal') !== null;
  

  当dialog通过showModal()打开时，会匹配:modal，而show()打开的非模态dialog不会。

• 检测元素的inert状态
  对于单个元素，可以直接检查其inert属性：

  const elementIsInert = document.body.inert;
  

  或者检查元素是否被模态dialog的inert作用覆盖：如果存在模态dialog，那么dialog之外的所有元素都会被隐式标记为inert，此时可以通过判断document.activeElement是否在模态dialog内部来辅助验证：

  const modalDialog = document.querySelector('dialog:modal');
  const isDocumentBlocked = modalDialog && !modalDialog.contains(document.activeElement);
  

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