Question

首先我使用的是vanilla 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

这对我有用

＆＃13;

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>'
}

＆＃13;

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

＆＃13;

Answer 2

如果您不介意，可以使用e.currrentTarget属性。适用于＆gt; = IE9。

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

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

2 个答案: