获取正确的event.target为Javascript中的父元素？

Question

首先，我正在使用香草javascript（无框架）。
我试图在尚不存在的元素上获取click事件侦听器，所以我正在这样做（其中parentElement已经存在）：

parentElement.addEventListener( "click", function(e){
    console.log(e.target)
} )

我要点击的东西看起来像这样：

<a href="#" class="modal-close">
    <i class="fa fa-times"></i>
</a>

我正在尝试使e.target匹配a标签，但它显然与i标签匹配，因为这就是被单击的东西。 因此，如果我尝试匹配A标签，则它将不匹配。

console.log(e.target.tagName == "A") //false

如何匹配该A标签而不是其子标签（ i标签）。

我知道，如果我使用jQuery，我可以做到：

$("parentElementThatExists").on("click","a.modal-close",function(e){...

那会很好。 但是我没有使用jQuery。

Answer 1

这对我有用

 window.onload=function(){ var x = document.getElementById("x"); x.addEventListener( "click", function(e){ console.log(e.target.tagName,e.target.parentNode.tagName) }) x.innerHTML='<a href="#" class="modal-close"><i class="fa fa-times">Click</i></a>' } 

 <div id="x"></div> 

Answer 2

如果您不介意，则可以只使用e.currrentTarget属性。 适用于> = IE9。

http://jsfiddle.net/dpatz/6optLe9r/