Javascript侦听器在事件目标的子对象而非实际元素上触发

Question

我有一个Javascript事件处理程序，无法获取我需要的属性。 这是我的情况。

我有一个类似于以下内容的HMTL DOM：

<div id='section-header'>
    <a href="#anchor1">
        <img src="path/to/an/image1.png">
    </a>
    <a href="#anchor2">
        <img src="path/to/an/image2.png">
    </a>
</div>

我实例化事件监听器是这样的：

var aList = document.getElementById('section-header').getElementsByTagName('a');

var anchorScroll = (event) => {
    event.preventDefault();

    var target = event.target.attributes;
    console.log("target: ", target);
};

for (var i = 0;i < aList.length;i++) {
    aList[i].addEventListener('click', anchorScroll, false);
}

当我点击一个图像，事件功能被激发，但是目标元素是图像，而不是a标签。 因此， attributes对象不具有href键值对，而我需要该href 。 相反，属性对象仅具有src键值对。

为什么a元素不是该事件的目标是什么？ 我该如何补救？

Answer 1

是的，该事件的初始目标将是img ，因为它是被单击的最里面的元素。 为了区分它和事件处理程序实际绑定的元素， Event对象具有target和currentTarget属性：

（ currentTarget ）[i]标识事件的当前目标，因为事件遍历DOM。 它始终引用事件处理程序已附加到的元素，而不是event.target ，后者标识发生事件的元素。

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/currentTarget

或者您可以简单地使用this 。

Answer 2

您可以使用事件委派来捕获节标题中的所有单击，然后根据标记名确定要采取的操作。

 var anchorScroll = (event) => { var link; event.preventDefault(); if (event.target.tagName === 'IMG') { link = event.target.parentNode; } else { link = event.target; } console.log("target: " + link); }; document.getElementById('section-header').addEventListener('click', anchorScroll); 

 <div id='section-header'> <a href="#anchor1"> <img src="path/to/an/image1.png"> </a> <a href="#anchor2"> <img src="path/to/an/image2.png"> </a> </div> <div id="output"></div>