如何将HTML中的onClick替换为addEventListener并解决图片闪显后消失的问题

嘿，我来帮你搞定这个问题！你遇到的图片闪一下就消失、只显示破损图标的情况，核心原因是**addEventListener绑定函数时的参数传递逻辑和原来的onclick属性不一样**，咱们一步步拆解解决：

问题根源 #

原来你在HTML里写onclick="ShowImage(this);"时，是直接把当前点击的图片元素作为参数传给ShowImage函数的。但当你用addEventListener('click', ShowImage)绑定函数时，ShowImage接收的第一个参数其实是事件对象（Event），而不是你点击的图片！

这就导致函数里的imgs.src变成了event.src（根本不存在这个属性），所以大图的src被设成了undefined，自然显示破损图标，看起来就像闪一下就没了。

两种解决方案 #

你可以任选一种来修复，都能让功能恢复正常：

方案1：修改ShowImage函数，适配事件对象

直接调整函数，从事件对象里拿到点击的图片元素：

function ShowImage(event) {
  // 从事件对象中获取触发点击的图片元素
  const clickedImg = event.target;
  const expandedImg = document.getElementById("expandedImg");
  expandedImg.src = clickedImg.src;
  expandedImg.parentElement.style.display = "block";
}

然后你的绑定代码保持不变就行：

const galleryImages = document.querySelectorAll(".gallery img");
for (const image of galleryImages) {
  image.addEventListener('click', ShowImage);
}

方案2：用箭头函数包装，手动传递图片元素

如果你不想修改原来的ShowImage函数，可以在绑定事件时用箭头函数把当前图片传进去，和原来的onclick逻辑保持一致：

const galleryImages = document.querySelectorAll(".gallery img");
for (const image of galleryImages) {
  // 用箭头函数包装调用，把当前image作为参数传给ShowImage
  image.addEventListener('click', () => ShowImage(image));
}

最后一步：清理HTML中的onclick属性 #

别忘了把所有img标签里的onclick="ShowImage(this);"删掉，比如：
原来的：

<img src="https://wallpapercave.com/dwp1x/wp5539369.jpg" onclick="ShowImage(this);">

改成：

<img src="https://wallpapercave.com/dwp1x/wp5539369.jpg">

这样修改后，点击小图就能正常显示大图，不会再出现闪显后消失的问题啦！

备注：内容来源于stack exchange，提问作者AshesOfPhoenix