时间戳

首页 > 解决方案 > 使用 addEventListener 单击图像时如何显示图像的文件名？

javascript - 使用 addEventListener 单击图像时如何显示图像的文件名？

问题描述

我在 HTML 页面上有一个图像网格，我试图在单击它时创建一个带有图像文件名称的警报。我正在从数组中的 python 脚本中提取图像urls

下面是我的 HTML 代码，包括相关的 JS 部分。我尝试过不将任何变量传递给函数（使用alert(document.src)），但单击图像会在警报中显示“未定义”。我也尝试将一个变量传递给函数并在我的警报中调用它，但它显示'[object MouseEvent]'。

我在我的函数中更改了什么以显示原始图像文件名，有没有办法为函数增加灵活性，以便无论单击哪个图像都运行相同的函数，而不是对所有四个图像重复相同的函数?

<tr>
  <div class="row">
    <td> <img src="{{ urls[0] }}" id="img0"></td>
    <td> <img src="{{ urls[1] }}" id="img1"></td>
    <td> <img src="{{ urls[2] }}" id="img2"></td>
    <td> <img src="{{ urls[3] }}" id="img3"></td>
  </div>
</tr>

<script>
      document.getElementById("img0").addEventListener("click", myFunction, false);

      function myFunction(image) {
        alert(image);
        // alert(document.src);
      }
    </script>

编辑：根据@hev1 的要求可重现的示例

更改 - 我已将 urls[k] 替换为图像的直接链接，以省去从我的 main.py 脚本中提取图像的步骤。JS 的注释掉部分效果很好（单击第一个图像会提醒该图像的 url），但是querySelectorAll当单击任何图像时会导致零响应（包括在控制台日志中）。

<tr>
  <div class="row">
    <td> <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12231413/Labrador-Retriever-MP.jpg" id="img0"></td>
    <td> <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2020/04/shelter-dog-cropped-1-632x329.jpg" id="img1"></td>
  </div>
  <div class="row">
    <td> <img src="https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg" id="img2"></td>
    <td> <img src="https://dogtime.com/assets/uploads/2011/03/puppy-development-1280x720.jpg" id="img3"></td>
  </div>
</tr>

<script>
  // document.getElementById("img0").addEventListener("click", myFunction, false);
  document.querySelectorAll(".row > td > img").forEach(img => img.addEventListener("click", myFunction, false));


  function myFunction() {
    alert(this.src);
  }
</script>

标签： javascripthtmladdeventlistener

解决方案

您可以使用this.src.

function myFunction() {
    alert(this.src);
}

要将事件处理程序附加到所有图像，您可以使用document.querySelectorAll.

document.querySelectorAll("img").forEach(img => img.addEventListener("click", myFunction, false));

推荐阅读