本文介绍如何用单个 javascript 函数响应任意图片点击事件，动态触发对应图片的全屏模式，避免为 12 张图重复编写 12 份相似代码，大幅提升开发效率与可维护性。
本文介绍如何用单个 javascript 函数响应任意图片点击事件，动态触发对应图片的全屏模式，避免为 12 张图重复编写 12 份相似代码，大幅提升开发效率与可维护性。
在实现多图画廊的全屏功能时，硬编码 getElementById("image1") 并复制 12 次函数不仅冗余，还极易出错、难以维护。现代 JavaScript 提供了更优雅的解决方案：通过类名批量获取元素 + 事件委托思想 + 箭头函数传参，即可让一个函数精准作用于被点击的图片。
✅ 正确实现步骤
1. 统一标记 HTML 元素
为所有需支持全屏的 标签添加相同 class（如 gallery-img），无需 ID：
<img class="gallery-img" src="photo1.jpg" alt="Gallery item 1"><img class="gallery-img" src="photo2.jpg" alt="Gallery item 2"><!-- ... 共 12 张 -->
2. 批量绑定点击事件
使用 document.querySelectorAll() 获取全部目标元素，并遍历为其添加监听器。注意：每个回调中将当前 image 实例作为参数传入 openFullscreen()：
const images = document.querySelectorAll('.gallery-img');
images.forEach(image => {
image.addEventListener('click', () => openFullscreen(image));
});
function openFullscreen(element) {
// 标准 API
if (element.requestFullscreen) {
element.requestFullscreen();
}
// Chrome/Safari (旧版 WebKit)
else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
// Edge/IE (旧版 MS)
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
// 可选：降级提示或 fallback 处理
else {
console.warn('Fullscreen API not supported in this browser.');
}
}
⚠️ 注意事项
- 不要混淆 image1 和 element：原代码中 else if (image1.webkitRequestFullscreen) 是错误引用（image1 未定义），应统一使用形参 element；
- 浏览器兼容性：现代浏览器已普遍支持 requestFullscreen()（无前缀），但保留前缀可兼顾旧版 Safari（WebKit）和旧版 Edge（MS）；
- 安全限制：全屏 API 必须由用户手势（如 click）触发，不可在 setTimeout 或 load 中自动调用，否则会被浏览器静默拒绝；
- 退出全屏：如需支持“再次点击退出”，可在函数内检查 document.fullscreenElement，并调用 document.exitFullscreen()。
? 进阶建议（可选）
若画廊结构复杂（如图片嵌套在
document.querySelector('.gallery').addEventListener('click', (e) => {
if (e.target.classList.contains('gallery-img')) {
openFullscreen(e.target);
}
});
这样即使后续动态添加图片，也无需重新绑定事件。
通过以上方式，你只需维护一份核心逻辑，即可让全屏功能无缝覆盖全部 12 张图片——简洁、健壮、符合现代前端实践。
