如何不使用全局img选择器样式化JS生成图片？修复导航栏点击失效

一、解决全局img选择器影响其他图片的问题 #

给JavaScript生成的拼贴图片添加专属类名，仅对该类名编写CSS样式，彻底避免污染网站其他图片元素：

1. 修改JavaScript代码，创建图片时添加专属类名：

function placeImage(x, y) {
  const nextImage = images[i]
  const img = document.createElement("img")
  img.setAttribute("src", nextImage)
  // 给拼贴图片添加专属类名
  img.classList.add("collage-img")
  img.style.left = x + "px"
  img.style.top = y + "px"
  img.style.transform = "translate(-50%, -50%) scale(0.5) rotate(" + (Math.random() * 20 - 10) + "deg)"
  document.body.appendChild(img)

  i = i + 1
  if (i >= images.length) {
    i = 0
  }
}

2. 修改CSS代码，把全局img选择器替换为类选择器：

/* 删除原来的全局img样式，替换为以下内容 */
.collage-img {
  position: absolute;
  top: 500px;
  left: 400px;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s; /* 补全动画时长单位，原代码缺少s */
}

注意：原CSS里animation: fadein 0.5;缺少时长单位，必须补充为0.5s动画才能正常生效。

二、解决导航栏无法点击的问题 #

全局click和touchend事件里的event.preventDefault()，直接阻止了导航栏链接的默认跳转行为。只需要判断点击目标是否属于导航栏区域，若属于则跳过拼贴逻辑、保留默认交互：

修改JavaScript的事件监听代码：

document.addEventListener("click", function(event) {
  // 检查点击目标是否在导航栏内（包括导航栏里的链接、图片）
  if (event.target.closest(".topnav")) {
    return; // 不执行拼贴逻辑，让导航栏正常响应点击
  }
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

document.addEventListener("touchend", function(event) {
  if (event.target.closest(".topnav")) {
    return;
  }
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

closest(".topnav")会自动检查点击目标本身或其父元素是否包含.topnav类，确保导航栏内所有元素都能正常交互。

额外修复细节 #

原CSS的fadein动画存在错误：opacity: 100不符合规范（opacity有效值为0-1），需要修正：

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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