应直接给预览图片元素绑定点击事件并调用stopPropagation()，避免在外层容器监听后判断target；需同时处理click和keydown（Enter/Space），为图片添加tabindex="0"以支持键盘操作。
图片预览点击时，事件冒泡常导致意外行为——比如点击预览图后，外层容器（如弹窗遮罩、列表项）也响应了点击，结果预览窗口直接关闭。核心解决思路是：在图片预览的点击事件中阻止冒泡，同时确保不影响其他必要交互。
明确事件绑定位置
不要把预览逻辑绑在 外层容器（如 .preview-modal 或 .image-list）上再靠 event.target 判断是否为 img；而应直接给 预览图片本身 绑定点击事件，并在其中调用 event.stopPropagation()。
- ✅ 推荐：给
<img class="preview-img">单独加事件监听 - ❌ 避免：只在遮罩层监听，再用
if (e.target.tagName === 'IMG')分支处理
阻止冒泡但保留默认行为
图片点击通常不需要默认跳转（<a> 包裹除外），所以重点是阻止传播，而非阻止默认动作。除非你用了 <a href="#">，否则不用 preventDefault()。
- 只需在事件回调第一行写：
e.stopPropagation(); - 如果图片在外链
<a>中，且你不想跳转，才加e.preventDefault(); - 避免滥用
return false，它同时停传播和默认行为，易误伤
兼顾键盘与触摸操作
仅处理 click 不够——用户可能用空格/回车键触发，或在移动端点按。建议统一用 addEventListener 监听 click 和 keydown：
立即学习“Java免费学习笔记（深入）”；
- 对图片添加
tabindex="0"，使其可聚焦 -
keydown中判断e.key === 'Enter' || e.key === ' ' - 两个事件里都调用
stopPropagation()
用事件委托时特别注意
若预览图是动态插入（如 AJAX 加载），用事件委托更稳妥，但必须精准匹配目标元素，并立即停止冒泡：
- 绑定到父容器：
parent.addEventListener('click', e => { - 检查是否点击图片：
if (e.target.matches('.preview-img')) { - 立刻
e.stopPropagation();，再执行预览逻辑 - 别写成
e.target.classList.contains('preview-img')，它对子元素（如 img 内的 SVG）会失效
不复杂但容易忽略——关键不是“能不能阻止”，而是“在哪一层、以什么方式阻止”。只要在真正触发预览动作的那个元素上干净地切断冒泡，其他交互就能各司其职。
