如何实现点击元素外部关闭列表 解决lists.some不是函数报错

你遇到的报错和功能异常来自4个写法问题：

• document.querySelectorAll(".list") 返回值是NodeList类数组，不是原生Array类型，在未做类型转换的环境下直接调用数组的some方法，就会抛出lists.some is not a function错误
• 事件回调里没有获取点击事件对象，完全没判断点击位置是否在列表区域内，无法实现「点击外部关闭」的核心逻辑
• 语法错误：lists是多元素集合，不能直接给lists.style赋值；CSS值none必须写成字符串"none"，裸写none会被引擎识别为未声明变量，抛出引用错误
• some的使用逻辑完全错位：你需要用some判断「点击目标是否落在任意一个可见列表内部」，而非判断是否存在可见列表。

// 将NodeList转为真正的数组，即可正常调用所有数组方法
const lists = Array.from(document.querySelectorAll(".list"));

// 点击事件只需要绑定1次，不要嵌套在函数里重复绑定
document.addEventListener("click", (e) => {
  // 判断点击是否落在任意一个可见的列表内部
  const isClickInsideList = lists.some(list => {
    // 隐藏的列表不做内部点击判断
    if (list.style.display === "none") return false;
    // 检测点击目标是列表本身、还是列表的子元素
    return list.contains(e.target);
  });

  // 点击在所有可见列表外部时，统一关闭所有列表
  if (!isClickInsideList) {
    lists.forEach(list => {
      list.style.display = "none";
    });
  }
});

// 如果需要手动触发关闭，单独封装方法即可
function closeList() {
  lists.forEach(list => {
    list.style.display = "none";
  });
}

• 如果你的列表是通过CSS样式表（而非行内style）设置的display: none，list.style.display无法读取到对应值，需要换成window.getComputedStyle(list).display判断元素显示状态
• 禁止把addEventListener写在closeList函数内部，否则每调用一次函数就会新增一个重复的事件监听，导致点击后逻辑重复执行

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