本文介绍如何使用原生 javascript 实现“点击图片以外任意位置自动关闭灯箱”的交互功能，无需依赖第三方库，兼容现代浏览器，代码简洁高效。
要实现“点击灯箱外部区域关闭灯箱”，核心思路是：监听全局点击事件，判断点击目标是否位于 .lightbox 容器内部；若不在，则触发关闭逻辑。这比为页面其他元素逐一绑定事件更优雅、更健壮。
✅ 推荐实现方式（简洁可靠）
在现有代码末尾添加以下一行即可：
document.addEventListener('click', (e) => {
// 若点击目标及其任意祖先都不是 .lightbox，则关闭灯箱
if (!e.target.closest('.lightbox')) {
closeLightbox();
}
});? Element.closest(selector) 是关键：它从当前元素开始向上遍历 DOM 树，返回第一个匹配选择器的祖先元素（包括自身），未找到则返回 null。因此 !e.target.closest('.lightbox') 精确表示“点击发生在灯箱之外”。
⚠️ 注意事项与优化建议
- 事件委托安全：该监听绑定在 document 上，天然支持动态插入的 .lightbox 元素，无需重新绑定。
- 避免重复绑定：确保这段代码只执行一次（例如放在脚本底部或 DOMContentLoaded 回调中），否则多次调用会注册多个重复监听器，导致多次关闭。
- 不干扰灯箱内交互：.lightbox 内部所有点击（如关闭按钮、图片、导航箭头等）均不会触发关闭，因为 closest() 会命中容器本身。
- 键盘与点击双通道关闭：保留原有的 Escape 键监听和关闭按钮绑定，与外部点击形成互补，提升可访问性（a11y）。
? 完整整合示例（精简版）
// ……（你原有的 allImages、showLightbox、closeLightbox 等定义保持不变）
// ✅ 新增：点击灯箱外关闭
document.addEventListener('click', (e) => {
if (!e.target.closest('.lightbox')) {
closeLightbox();
}
});
// ✅ 建议：将该监听也与 lightbox 生命周期联动（可选进阶）
// 例如在 showLightbox() 中启用，在 closeLightbox() 中移除，防止全局监听长期驻留
// 但对多数场景，单次绑定 + 条件判断已足够高效且安全✅ 总结
该方案以最少代码达成最大可用性：语义清晰、性能轻量、兼容性强。它不侵入原有结构，不增加 CSS 类或 HTML 属性，纯粹通过 DOM 查询逻辑完成行为控制，是现代轻量级灯箱交互的标准实践之一。
