必须用event.preventDefault()阻止<a>默认跳转行为，否则点击图片会触发页面跳转或滚动，打断弹层逻辑；事件须绑定在<a>上并用closest()捕获，确保点击图片或内边距区域均有效。
点击图片直接用 <a> 标签触发弹层，为什么不行？
因为 <a> 默认行为是跳转（哪怕 href="#" 也会滚动到页面顶部），不加干预就会打断弹层逻辑。你看到的“点了没反应”或“闪一下就跳走”，基本都是这个原因。
必须用 event.preventDefault() 阻止默认行为，且绑定事件的对象得是 <a> 本身，不是里面的 <img> —— 否则点击图片区域可能不触发（尤其当 <a> 没设宽高或有 padding 时）。
- 别写
<a href="javascript:void(0)">：语义差，可访问性弱，部分浏览器会报 warning - 推荐写法：
<a href="large.jpg" data-lightbox="true"><img src="thumb.jpg"></a>，把大图地址存在href里，干净又利于 SEO - 如果用
data-src存大图地址，href就该设为#，但必须确保脚本里调用了preventDefault()
addEventListener 绑定在 <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>加onerror事件，比如显示错误提示或隐藏加载占位符 - 记得给弹层加
tabindex="-1"并在显示后.focus()，否则键盘用户无法操作关闭按钮 - 关闭按钮必须用
<button type="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 后再初始化缩放逻辑。
