为何JavaScript中按下Enter键无法关闭Modal模态框？

设置按下Enter或Escape键时关闭Modal模态框，但目前仅Escape键能正常触发关闭，Enter键无响应。相关代码如下：

JavaScript代码 #

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnsOpenModal = document.querySelectorAll('.show-modal');
const btnCloseModal = document.querySelector('.close-modal');

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

for (let btn of btnsOpenModal) {
  btn.addEventListener('click', openModal);
}

// 这段代码仅Escape键生效，预期Enter键也可触发关闭
document.addEventListener('keydown', function (event) {
  console.log(event.key);
  if (!modal.classList.contains('hidden')) {
    if (event.key === 'Escape') closeModal();
    if (event.key === 'Enter') closeModal();
  }
});

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Modal window</title>
  </head>
  <body>      
    <button class="show-modal">Show modal 1</button>
    <button class="show-modal">Show modal 2</button>
    <button class="show-modal">Show modal 3</button>

    <div class="modal hidden">
      <button class="close-modal">&times;</button>
      <h1>I'm a modal window 😍</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="overlay hidden"></div>

    <script src="script.js"></script>
  </body>
</html>

排查原因 #

核心问题是打开模态框后，原触发按钮仍持有焦点：

• 点击show-modal按钮打开模态框后，浏览器默认会保留该按钮的焦点状态。
• 此时按下Enter键，会触发按钮的默认点击事件，重新执行openModal()方法。
• 这就导致closeModal()和openModal()先后执行，模态框看似没有关闭，实际是关闭后立刻重新打开了。

解决方案 #

方案1：打开模态框时转移焦点到模态框内部元素 #

修改openModal函数，将焦点设置到模态框的关闭按钮或模态框本身，避免焦点停留在打开按钮上：

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
  btnCloseModal.focus(); // 将焦点转移到关闭按钮
};

方案2：在keydown事件中阻止Enter键的默认行为 #

当按下Enter键触发关闭时，阻止事件的默认行为，避免触发打开按钮的点击事件：

document.addEventListener('keydown', function (event) {
  console.log(event.key);
  if (!modal.classList.contains('hidden')) {
    if (event.key === 'Escape') closeModal();
    if (event.key === 'Enter') {
      closeModal();
      event.preventDefault(); // 阻止默认行为，避免触发按钮点击
    }
  }
});

方案3：打开模态框时移除原按钮的焦点 #

在openModal中主动移除打开按钮的焦点：

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
  document.activeElement.blur(); // 移除当前焦点元素的焦点
};

以上三种方案任选其一即可解决Enter键无法关闭模态框的问题。

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