如何按Esc关闭模态框内原生select元素而不关闭模态框？

要实现按下Escape键时仅关闭<select>的下拉列表而不关闭模态框，核心是避免select的Escape事件触发模态框的关闭逻辑，以下是两种可行方案：

方案一：全局事件中判断当前焦点元素 #

修改全局keyup事件处理函数，增加对当前聚焦元素的判断：如果焦点在<select>上，则不执行关闭模态框的操作。

window.onkeyup = (event) => {
  if (modal.style.display === "block" && event.code === "Escape") {
    // 检查当前焦点是否在select元素上
    const activeEl = document.activeElement;
    if (activeEl?.tagName !== 'SELECT') {
      modal.style.display = "none";
    }
  }
}

原理：当select下拉列表打开时，按下Escape键，浏览器会先关闭下拉列表，此时焦点仍停留在select元素上。通过判断当前焦点元素是否为select，就能避免误关模态框。

方案二：阻止select的Escape事件冒泡 #

给模态框内的所有<select>元素添加keyup事件监听，当按下Escape时阻止事件冒泡，这样全局的window事件就不会接收到该事件，也就不会触发模态框关闭。

// 给模态框内的所有select绑定事件
const modalSelects = modal.querySelectorAll('select');
modalSelects.forEach(select => {
  select.addEventListener('keyup', (e) => {
    if (e.code === 'Escape') {
      e.stopPropagation();
    }
  });
});

// 保留原有的全局事件逻辑
window.onkeyup = (event) => {
  if (modal.style.display === "block" && event.code === "Escape") {
    modal.style.display = "none";
  }
}

原理：select的Escape事件会先被自身的监听函数捕获，阻止冒泡后，事件不会传递到window层，因此模态框的关闭逻辑不会被触发。

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