点击外部含父DIV滚动条时关闭.box的脚本前置加载解决方案

当脚本放在<head>标签中时，代码会在DOM完全构建前执行，此时document.querySelectorAll("div")和document.querySelectorAll(".box")都会返回空集合，导致事件绑定失效，这就是原代码在项目中无法运行的核心原因。

以下是几种无需将脚本放在页面末尾的实现方案，同时满足你使用class而非ID的需求：

方案一：监听DOMContentLoaded事件 #

通过该事件确保DOM构建完成后再执行元素查询和事件绑定，这是最通用的解决方式：

document.addEventListener('DOMContentLoaded', function() {
  function closeBoxes(event) {
    // 改用函数参数接收事件对象，避免依赖全局event
    if (!event.target.closest(".box")) {
      const boxes = document.querySelectorAll(".box");
      boxes.forEach(box => box.style.display = "none");
    }
  }

  // 为所有div绑定scroll事件
  const allDivs = document.querySelectorAll("div");
  allDivs.forEach(div => {
    div.addEventListener('scroll', closeBoxes);
  });

  // 为window绑定click事件
  window.addEventListener('click', closeBoxes);
});

方案二：给脚本标签添加defer属性 #

在引入脚本的标签上添加defer属性，浏览器会自动在DOM加载完成后再执行脚本，无需修改JS代码结构：

<head>
  <script src="你的脚本文件路径.js" defer></script>
</head>

该方法的优势是不用改动原有JS逻辑，仅需调整脚本引入方式即可。

1. 避免依赖全局event对象：原代码直接使用全局event存在兼容性和规范问题，改为通过函数参数接收事件对象更可靠。
2. 缩小事件监听范围：如果不需要给所有div绑定scroll事件，可以只选择带有滚动条的元素（即overflow为auto或scroll的div），减少不必要的性能消耗：

// 仅选择有滚动条的div（示例按样式类筛选，可根据实际CSS调整）
const scrollableDivs = document.querySelectorAll('div.main, div.container, div.child');
scrollableDivs.forEach(div => {
  div.addEventListener('scroll', closeBoxes);
});

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