本文介绍如何通过原生 javascript 实现“点击图片以外任意区域自动关闭灯箱”的交互逻辑，无需依赖框架，在现有 lightbox 代码基础上仅需一行事件监听即可完成。
要实现「点击灯箱（.lightbox）外部区域即关闭灯箱」的效果，核心思路是：监听全局点击事件，判断点击目标是否位于灯箱内部；若不在，则触发关闭逻辑。
你当前的代码已具备完善的 showLightbox 和 closeLightbox 功能，只需补充一个 document 级别的点击事件监听器，并利用 Element.closest() 方法高效判断点击是否发生在 .lightbox 及其子元素内。
✅ 推荐添加的代码如下（建议放在 showLightbox 函数末尾，确保每次打开灯箱时监听已就绪）：
// 在 showLightbox 函数内部、lightbox.classList.add("show") 之后添加：
document.addEventListener('click', (e) => {
// 若点击目标不在 .lightbox 内（包括其自身和所有后代），则关闭
if (!e.target.closest('.lightbox')) {
closeLightbox();
}
});⚠️ 注意事项：
- 避免重复绑定：每次调用 showLightbox 都添加一次监听器会导致多次触发。推荐改用「单次绑定 + 条件判断」方式——即在页面初始化时绑定一次，而非在 showLightbox 中重复添加。更稳妥的写法是：
// 页面加载后一次性绑定（如放在脚本末尾或 DOMContentLoaded 中）
document.addEventListener('click', (e) => {
const lightbox = document.querySelector('.lightbox');
if (lightbox.classList.contains('show') && !e.target.closest('.lightbox')) {
closeLightbox();
}
});- 同时，为防止点击灯箱内部（如图片、关闭按钮、标题等）误触发关闭，closest('.lightbox') 能精准捕获所有内部点击，安全可靠。
- 若灯箱支持拖拽、缩放等交互，建议额外阻止 .lightbox img 的 mousedown 事件冒泡（视需求而定），但基础场景下无需处理。
? 小结：
仅需一行语义清晰的逻辑判断（!e.target.closest('.lightbox')），即可优雅实现“点击外部关闭”效果。它比遍历父节点、计算坐标或维护布尔状态更简洁、高效且符合现代 Web API 最佳实践。配合已有的 ESC 键关闭与按钮关闭，你的 lightbox 已具备完整的用户友好退出机制。
