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>