技术问询：如何实现鼠标左键关闭弹窗及ESC关闭代码排障

阿华AIGC实验室

2026-5-8

嘿，我来帮你搞定这两个弹窗问题！咱们一步步来解决：

问题1：仅允许鼠标左键关闭弹窗

你现在的代码监听了mousedown事件，但这个事件会响应所有鼠标按键（左键、右键、中键）。要改成只响应左键，只需要在overlayClose函数里加一个判断：鼠标按键的button属性等于0（这是浏览器标准的左键标识）。

修改后的overlayClose函数如下：

const overlayClose = (evt) => { 
  // 仅当按下鼠标左键时才执行关闭逻辑
  if (evt.button === 0 && evt.target.classList.contains('popup_active')) { 
    togglePopup(evt.target); 
  } 
}

这样只有左键点击弹窗遮罩层时，才会触发关闭操作，右键或其他按键点击不会生效。

问题2：修复ESC按键关闭弹窗的失效问题

你的ESC按键代码失效的核心原因是：closeEscape函数里的popup变量没有定义！这个变量是togglePopup函数的局部参数，closeEscape根本访问不到它。

解决方法是直接获取当前处于激活状态的弹窗（也就是带有popup_active类的元素），然后移除激活类。另外，为了避免重复绑定事件，我们可以保持togglePopup里的事件监听逻辑，只修改closeEscape函数：

function togglePopup(popup) { 
  popup.classList.toggle('popup_active'); 
  if (popup.classList.contains('popup_active')) { 
    document.addEventListener('keydown', closeEscape); 
  } else { 
    document.removeEventListener('keydown', closeEscape); 
  } 
} 

const closeEscape = (evt) => { 
  if (evt.key === "Escape") { 
    // 获取当前激活的弹窗
    const activePopup = document.querySelector('.popup_active');
    if (activePopup) {
      activePopup.classList.remove('popup_active');
      // 记得移除键盘事件监听，避免内存泄漏
      document.removeEventListener('keydown', closeEscape);
    }
  } 
}

这里的修改点：