应使用事件委托——监听容器click，用event.target.closest()精准捕获图片，天然支持懒加载和动态插入，避免重复绑定与事件丢失。

在 Masonry 瀑布流布局中，图片位置是动态计算、非线性排列的，DOM 节点不按视觉顺序插入。直接给每张图片绑定 click 事件不仅性能差，还会因异步加载、重排导致事件丢失。事件委托是更可靠的选择——只需监听容器，利用事件冒泡和 event.target 精准识别被点击的图片。

用父容器委托，避免重复绑定

Masonry 布局（如使用 Masonry 库或 CSS column-count + break-inside: avoid）通常将图片包裹在统一容器内（如 .masonry-grid）。你只需为这个容器绑定一次事件，无需关心图片何时渲染或是否滚动加载：

• 监听容器的 click，而非每个

  <img></li>
    <li>确保容器是图片的**最近稳定祖先**（不随 Masonry 重排而重建）</li>
    <li>若用第三方库（如 vanilla-masonry），确认其容器节点长期存在，不销毁重建</li>
  </ul>
  
  <H3>精准匹配目标图片，过滤非 img 元素</H3>
  <p>点击可能落在图片的空白区域、外层包裹 <code><div>

  或加载占位符上。需通过 event.target 向上查找真正的图片元素：
  • 用 event.target.closest('img[data-src], img[src]') 安全捕获图片（兼容懒加载场景）
  • 避免只用 event.target.tagName === 'IMG'，因为点击文字或边框时 target 可能是父级
  • 可加 class 判断（如 event.target.closest('img.masonry-item')）增强语义控制

  处理懒加载与动态插入的图片

  Masonry 常配合图片懒加载（如 loading="lazy" 或 IntersectionObserver）。新图片插入后无需重新绑定事件：

  

  deep-java-review

  Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

  下载

  立即学习“Java免费学习笔记（深入）”；

  • 委托天然支持动态内容——只要新 <img> 是委托容器的后代，点击即生效
  • 若图片初始只有 data-src，点击时可在此处触发加载并展示大图，或跳转到详情页
  • 注意：不要在委托回调里调用 event.stopPropagation()，否则会阻断其他依赖冒泡的逻辑（如全局快捷键）

  示例代码（轻量、无依赖）

  假设 HTML 结构如下：

  <div class="masonry-grid">
    <div class="grid-item"><img  alt="..."></div>
    <div class="grid-item"><img  alt="..."></div>
  </div>

  JS 委托逻辑：

  document.querySelector('.masonry-grid').addEventListener('click', (e) => {
    const img = e.target.closest('img[data-src], img[src]');
    if (!img) return;
  
    // 此处处理点击：预览、跳转、记录埋点等
    console.log('Clicked image:', img.src || img.dataset.src);
    // 示例：打开大图模态框
    // showModal(img.dataset.src || img.src);
  });