网页图片放大后双击移除功能失效的技术求助

问题根源 #

1. 放大生成的新图片没有绑定双击触发关闭的事件，导致双击操作无响应
2. 原zoomOut函数逻辑错误，事件目标指向原图而非放大后的图片，曾造成误删原图的问题

修复后的完整代码 #

JavaScript部分

function zoomIn(event) {
  var element = event.target;
  // 创建放大图元素
  var zoomedImage = new Image();
  zoomedImage.src = element.src;
  zoomedImage.classList.add("zoomed-image");
  
  // 给放大图绑定双击关闭事件
  zoomedImage.addEventListener("dblclick", zoomOut);
  
  // 可选：给body添加类来显示背景遮罩
  document.body.classList.add("has-zoom");
  
  // 将放大图添加到页面
  document.body.appendChild(zoomedImage);
}

function zoomOut(event) {
  var zoomedImage = event.target;
  // 移除当前放大图
  if (zoomedImage && zoomedImage.parentNode === document.body) {
    zoomedImage.parentNode.removeChild(zoomedImage);
    // 移除body的遮罩类
    document.body.classList.remove("has-zoom");
  }
}

// 给所有需要放大的图片绑定点击事件
document.querySelectorAll("img").forEach(img => {
  img.addEventListener("click", zoomIn);
});

CSS样式（确保放大图正确显示）

/* 放大图样式：居中、全屏适配、高层级 */
.zoomed-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  z-index: 9999;
  cursor: zoom-out;
}

/* 背景遮罩：点击放大后暗化页面背景 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9998;
  display: none;
}

body.has-zoom::after {
  display: block;
}

关键修改点 #

• 在zoomIn中给新创建的zoomedImage绑定dblclick事件，双击目标明确为放大后的图片
• zoomOut中直接使用事件目标（放大图）进行移除操作，避免误触原图
• 添加CSS样式优化放大图的显示效果，包括居中、适配视口、背景遮罩

内容的提问来源于stack exchange，提问作者Bert