本文介绍一种简洁高效的方式，使用事件委托与通用类选择器，让单个 javascript 函数响应任意图片点击并触发其自身的全屏模式，避免为12张图重复定义12个id和函数。
本文介绍一种简洁高效的方式，使用事件委托与通用类选择器，让单个 javascript 函数响应任意图片点击并触发其自身的全屏模式，避免为12张图重复定义12个id和函数。
在构建多图画廊（如12张图片）并集成 Fullscreen API 时，硬编码 getElementById("image1") 并复制12遍函数不仅冗余、难以维护，还违背了 JavaScript 的DRY（Don’t Repeat Yourself）原则。正确的做法是统一标记 + 批量绑定 + 上下文感知调用。
✅ 推荐实现方案
首先，为所有需支持全屏的 元素添加统一的 class（例如 class="gallery-img"），而非依赖唯一 ID：
<img class="gallery-img" src="photo1.jpg" alt="Image 1"><img class="gallery-img" src="photo2.jpg" alt="Image 2"><!-- ... 共12张 -->
接着，在 JavaScript 中一次性获取全部元素，并为每个元素绑定点击事件——关键在于：将当前被点击的 DOM 元素作为参数传入处理函数：
// 获取所有画廊图片
const galleryImages = document.querySelectorAll('.gallery-img');
// 为每张图绑定点击事件
galleryImages.forEach(img => {
img.addEventListener('click', () => openFullscreen(img));
});
// 全屏函数接收具体元素，不再依赖全局变量或ID
function openFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
console.warn('Fullscreen API is not supported in this browser.');
}
}
⚠️ 注意事项与增强建议
- 浏览器兼容性兜底：requestFullscreen() 在不同内核前缀不同（webkit, ms），上述代码已覆盖主流情况；但现代浏览器普遍支持无前缀版本，可考虑配合 caniuse 检查实际需求。
- 安全限制：Fullscreen API 要求交互触发（如用户点击），且部分浏览器禁止 iframe 内调用，确保脚本运行在顶层上下文。
-
退出全屏提示（可选增强）：可监听 fullscreenchange 事件，动态更新 UI（如显示“退出全屏”按钮）：
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { console.log('Exited fullscreen'); } }); - 性能友好：querySelectorAll + forEach 是轻量级方案；若图片数量极大（远超12），可改用事件委托（监听父容器），但对本场景属过度优化。
通过该方法，你只需维护一份逻辑清晰、可扩展的代码，轻松支撑任意数量的画廊图片——既满足课程项目截止时间压力，也为后续功能迭代打下坚实基础。
