必须用event.preventdefault()阻止默认跳转行为，否则点击图片会触发页面跳转或滚动，打断弹层逻辑；事件须绑定在上并用closest()捕获，确保点击图片或内边距区域均有效。
点击图片直接用 @#@#@#@#@#@#@#@#@#@0，把大图地址存在 href 里，干净又利于 SEO
data-src 存大图地址，href 就该设为 #，但必须确保脚本里调用了 preventDefault()
addEventListener 绑定在 <a></a> 上的实操要点
直接给每个 <a></a> 单独绑事件效率低，推荐用事件委托——监听父容器，再判断 event.target 是否匹配。
document.querySelector('.gallery').addEventListener('click', function(e) {
const link = e.target.closest('a[data-lightbox]');
if (!link) return;
e.preventDefault();
const largeSrc = link.href || link.dataset.src;
showLightbox(largeSrc); // 自定义弹层函数
});
-
e.target.closest('a[data-lightbox]')比e.target.tagName === 'A'更可靠：用户可能点的是<img>或内边距区域，closest()能向上找最近的匹配祖先 - 务必检查
largeSrc是否存在，空字符串或undefined会导致弹出空白图 - 不要在循环里反复调用
querySelectorAll('a')+forEach绑定——DOM 变动后新添加的链接不会自动生效
弹层 DOM 插入时机和样式关键点
弹层元素不能一开始就写死在 HTML 里（影响首屏加载），也不能每次点击都 innerHTML = '...' 重建（破坏焦点、动画状态、内存泄漏）。
- 最佳实践：页面加载时只创建一次弹层 DOM，初始
display: none，点击时改src+style.display = 'flex' - 图片加载失败要兜底：
<img src="thumb.jpg">加onerror事件，比如显示错误提示或隐藏加载占位符 - 记得给弹层加
tabindex="-1"并在显示后.focus()，否则键盘用户无法操作关闭按钮 - 关闭按钮必须用
<button type="button"></button>，避免表单提交意外触发
移动端双击放大和手势缩放容易被忽略的问题
纯 CSS transform: scale() 在 iOS Safari 上常卡顿，而且双击放大后拖拽会触发页面回弹（overscroll behavior）。
- 禁用弹性滚动：
body { overscroll-behavior-y: contain; }，防止弹层滚动到底部时页面跟着动 - 双击检测别用
dblclick事件——移动端不触发，得自己计时判断两次click间隔是否 - 缩放功能建议用
pinch-zoom库或原生touchstart/move/end+transform: scale()+transform-origin控制中心点 - 别忘了
viewportmeta 标签里加user-scalable=yes，否则 iOS 会锁死缩放
最麻烦的其实是图片加载完成前就缩放——此时 naturalWidth/Height 还是 0，得监听 img.onload 后再初始化缩放逻辑。
