JavaScript如何将不同ID元素复用同一mouseup事件处理函数？

你的思路方向是对的，但JavaScript里用for...in遍历数组并不合适，还会遇到闭包陷阱——循环结束后所有监听函数里的id都会指向数组最后一个元素，导致只有最后一个容器能正常工作。下面是几种可行的优化方案：

方案一：用forEach遍历创建独立作用域 #

利用Array.forEach()的迭代特性，每次循环都会创建独立的作用域，保存当前的ID值，避免闭包问题：

['mySelectOptions', 'newSelectOptions'].forEach(function(id) {
  document.addEventListener('mouseup', function(e) {
    const container = document.getElementById(id);
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });
});

方案二：封装复用函数 #

把重复逻辑封装成一个可复用的函数，再分别传入不同ID调用，代码更清晰易维护：

function setupContainerCloseListener(containerId) {
  document.addEventListener('mouseup', function(e) {
    const container = document.getElementById(containerId);
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });
}

// 给两个容器分别绑定监听
setupContainerCloseListener('mySelectOptions');
setupContainerCloseListener('newSelectOptions');

方案三：用类名统一处理（推荐） #

如果可以给两个容器添加共同的类名（比如select-options-container），可以用事件委托只绑定一次监听，更高效：

<!-- 先给两个容器加共同类名 -->
<div id="mySelectOptions" class="select-options-container"></div>
<div id="newSelectOptions" class="select-options-container"></div>

document.addEventListener('mouseup', function(e) {
  // 获取所有目标容器
  const containers = document.querySelectorAll('.select-options-container');
  containers.forEach(container => {
    if (!container.contains(e.target)) {
      container.style.display = 'none';
    }
  });
});

这种方法只需要绑定一次事件监听，后续新增同类容器时也不需要修改JS代码，扩展性更好。

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