时间戳

首页 > 解决方案 > 不触发点击事件。我的代码有什么问题？

javascript - 不触发点击事件。我的代码有什么问题？

问题描述

我正在尝试为列表中的每个图像添加一个点击事件。由于某种原因，该函数没有被触发。你能找出原因吗？

注意：如果我以编程方式调用 ShowOverlayLayer()，就可以了。

这是我的代码： 编辑 - 我插入了完整的 css 代码，我注意到没有它，就像有些人写的那样 - 它正在工作。所以它可能在额外的css代码中的某个地方

let imagesList = document.getElementsByClassName("smallImage");
let overlayLayer = document.getElementById("overlayLayer");

for (let i = 0; i < imagesList.length; i++) {
  imagesList[i].addEventListener("click", (() => {
    ShowOverlayLayer();
  }));
}

function ShowOverlayLayer() {
  if (!overlayLayer.classList.contains("overlayLayerShow")) {
    overlayLayer.classList.add("overlayLayerShow");
  }
  if (overlayLayer.classList.contains("overlayLayerHide")) {
    overlayLayer.classList.remove("overlayLayerHide");
  }
}
<!-- edited code -->

body{
   margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}


.smallImage{
    float: left;
    position: relative;
    height: 100%;
}

#overlayLayer{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
}

.overlayLayerHide{
    opacity: 0;
}

.overlayLayerShow{
    opacity: 0.8;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <!--CSS link-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="gallerySection">
    <img class="smallImage" src="images/adult-camping.jpg" />
    <img class="smallImage" src="images/beach-clouds.jpg" />
    <img class="smallImage" src="images/brown-country.jpg" />
    <img class="smallImage" src="images/clouds-dawn.jpg" />
  </div>
  <div id="overlayLayer" class="overlayLayerHide">

  </div>
  <!--JS link-->
  <script src="script.js"></script>
</body>

</html>

此代码应设置覆盖 div

标签： javascripthtml

解决方案

实际上，该事件为每个图像正确触发。我怀疑你是否认为它不起作用，因为你没有从你的代码中得到预期的结果，看看下面的代码和控制台输出。

let imagesList = document.getElementsByClassName("smallImage");
let overlayLayer = document.getElementById("overlayLayer");

for (let i = 0; i < imagesList.length; i++) {
  imagesList[i].addEventListener("click", (() => {
    ShowOverlayLayer();
  }));
}

function ShowOverlayLayer() {
console.log('clicked'); 
}
#overlayLayer {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: black;
}

.overlayLayerHide {
  opacity: 0;
}

.overlayLayerShow {
  opacity: 0.8;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <!--CSS link-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="gallerySection">
    <img class="smallImage" src="images/adult-camping.jpg" />
    <img class="smallImage" src="images/beach-clouds.jpg" />
    <img class="smallImage" src="images/brown-country.jpg" />
    <img class="smallImage" src="images/clouds-dawn.jpg" />
  </div>
  <div id="overlayLayer" class="overlayLayerHide">

  </div>
  <!--JS link-->
  <script src="script.js"></script>
</body>

</html>

如果您的代码仍然无法正常工作，请在您的浏览器上尝试清空缓存和硬重新加载。谢谢 ：）

推荐阅读