本文介绍使用原生 javascript 实现“点击图片外部区域自动关闭灯箱”的完整方案，包含事件委托、`closest()` 方法应用、边界条件处理及与现有逻辑的无缝集成。
要实现“点击图片外任意位置关闭灯箱”，核心思路是：监听全局点击事件，判断点击目标是否位于 .lightbox 内部；若不在，则触发关闭逻辑。这比为每个非灯箱元素单独绑定事件更高效、更健壮。
你当前的代码已具备良好的结构基础（如 showLightbox、closeLightbox、ESC 键支持），只需补充一处关键逻辑即可：
✅ 推荐实现方式（一行优雅解决）
在 showLightbox() 函数末尾添加如下事件监听（注意：仅在灯箱打开时绑定，避免重复注册）：
const showLightbox = (imgSrc) => { lightbox.querySelector("img").src = imgSrc; lightbox.classList.add("show"); document.body.style.overflow = "hidden"; document.addEventListener("keydown", closeLightboxOnEsc); // ? 新增：点击灯箱外部区域关闭 const handleClickOutside = (e) => { if (!e.target.closest('.lightbox')) { closeLightbox(); } }; document.addEventListener('click', handleClickOutside); // ? 小技巧：将 handler 存为属性，便于后续移除（防内存泄漏） lightbox.handleClickOutside = handleClickOutside; };同时，在 closeLightbox() 中移除该监听，确保每次关闭后清理：
const closeLightbox = () => { lightbox.classlist.remove("show"); document.body.style.overflow = "auto"; document.removeEventListener("keydown", closeLightboxOnEsc); // ? 清理外部点击监听 if (lightbox.handleClickOutside) { document.removeEventListener('click', lightbox.handleClickOutside); lightbox.handleClickOutside = null; } };⚠️ 注意事项
- 不要用 e.target !== lightbox 判断：因为点击灯箱内的子元素（如
或
）时，e.target 是子节点而非 .lightbox 本身，直接比较会误判。- Element.closest(selector) 是关键：它从当前元素向上遍历 dom，返回第一个匹配选择器的祖先（含自身）。只要点击发生在 .lightbox 内任意位置（包括图片、关闭按钮、空白背景），e.target.closest(‘.lightbox’) 就返回真值，从而阻止关闭。
- 避免重复绑定：每次调用 showLightbox() 都新增 click 监听器，若未清理会导致多次触发 closeLightbox()。因此必须配对添加/移除。
- 移动端兼容性良好：click 事件在现代移动端浏览器中表现稳定；如需支持触摸场景，可额外监听 touchstart，但通常 click 已足够（因移动端 click 有约 300ms 延迟，但语义正确）。
✅ 最终效果验证
- 点击图片 → 灯箱弹出，页面滚动锁定；
- 点击灯箱内任意位置（图片、关闭按钮、空白背景）→ 无反应（保持开启）；
- 点击灯箱外任意区域（导航栏、页脚、空白内容区）→ 灯箱立即关闭，滚动恢复；
- 按 ESC 键 → 同样关闭，且事件监听被正确清理。