在DOM中点击任意位置获取图片源

Question

当我点击图片时，我能够得到图片源...

document
    .querySelectorAll('.module img')
    .forEach(el => el.addEventListener("click", e => {
        console.log(e.target.currentSrc)
    });

<div class="module">
    <img src="pics/pic1.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic2.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic3.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

...但我如何才能在不为每个子元素做事件监听的情况下，无论我在父div中的哪里点击，都能得到图片源？

Answer 1

无论你的解决方案是什么，听起来你需要从以下两个方面获取信息。this或 event 传入事件监听器。

document
    .querySelectorAll('.module')
    .forEach(el => {
        el.addEventListener("click", e => {
            console.log(e.currentTarget.querySelector('img').currentSrc);
        });
    });

<div class="module">
    <img src="pics/pic.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic2.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic3.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

Answer 2

你可以这样做，添加一个 listener 遍及 div 与类选择器。

document.querySelectorAll(".module").forEach(ele => {
  ele.addEventListener("click", function() {
    console.log(this.children[0].getAttribute('src'))
  })
})

<div class="module">
  <img src="pics/pic.jpg">
  <h2>Title</h2>
  <p class="usp">Lorem ipsum</p>
  <p>Lorem impsum dolor sit amet</p>
</div>

Answer 3

为父类添加一个事件监听器，并进行 不 使用event.stopPropagation()

var el = document.querySelector(".module");
el.addEventListener("click", function(ev){
  // Parent div clicked, get the image element ref
  var img = document.querySelector(".module img");
  alert(img.currentSrc)
  // Image src alerted
})