原生JS实现的模态框多次开闭后点击事件重复触发问题求助

问题原因 #

事件多次触发的核心原因是点击事件监听被重复绑定。你当前给出的事件委托代码逻辑本身没问题，但如果这段addEventListener代码被嵌套在模态框打开的触发函数内部，每次打开模态框都会给document新增一个点击监听，开闭次数和监听函数数量一致，触发次数自然会逐次叠加。另外你贴出的JS代码末尾缺少事件监听的闭合右括号，会直接触发语法错误，需要优先补上。

修复方案 #

方案1：全局仅绑定一次事件（推荐）

事件委托本身的设计就是全局仅绑定一次，即可匹配所有对应元素的点击事件，你只需要把绑定逻辑抽离到页面初始化逻辑中，全程只执行一次即可，不要嵌套在模态框打开的相关函数内：

// DOM加载完成后仅执行一次
document.addEventListener('DOMContentLoaded', () => {
  const modalContainerGestionDocumental = document.getElementById('modal-container-gestion-documental');

  document.addEventListener('click', (e) => {
    if (e.target.matches('.abrir-gestion-documental')) {
      e.preventDefault();
      modalContainerGestionDocumental.classList.add('show-modal');
    }
    if (e.target.matches('.cerrar-gestion-documental')) {
      e.preventDefault();
      modalContainerGestionDocumental.classList.remove('show-modal');
    }
  }); // 补充之前缺失的闭合右括号
})

方案2：绑定前先移除旧监听（适合必须嵌套绑定的场景）

如果业务逻辑要求必须把事件绑定放在模态框打开的函数内，可以把监听函数抽为具名函数，每次绑定前先移除旧的监听，保证始终只有一个监听生效：

const modalContainerGestionDocumental = document.getElementById('modal-container-gestion-documental');

// 抽为具名函数才能被removeEventListener匹配到
function handleModalClick(e) {
  if (e.target.matches('.abrir-gestion-documental')) {
    e.preventDefault();
    modalContainerGestionDocumental.classList.add('show-modal');
  }
  if (e.target.matches('.cerrar-gestion-documental')) {
    e.preventDefault();
    modalContainerGestionDocumental.classList.remove('show-modal');
  }
}

// 你的模态框打开触发逻辑
function openModal() {
  // 先移除旧监听，再绑定新监听
  document.removeEventListener('click', handleModalClick);
  document.addEventListener('click', handleModalClick);
  modalContainerGestionDocumental.classList.add('show-modal');
}

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