你能使用event.target定位元素父元素吗？

Question

我试图改变我的页面的innerHTML成为我点击的元素的innerHTML,唯一的问题是我希望它采取整个元素,如:

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

而我用javascript编写的代码:

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

将定位我点击的特定元素.

我想要实现的是当我点击<section>元素中的任何位置时,它将采用整个元素的innerHTML而不是我点击的特定元素.

我认为这与选择被点击的那个的父元素有关,但我不确定,也无法在网上找到任何东西.

如果可能的话,我想远离JQuery

Answer 1

我认为你需要的是使用event.currentTarget.这将包含实际具有事件侦听器的元素.因此,如果整个事件<section>具有eventlistener event.target将是被点击的元素,那么<section>将是event.currentTarget.

否则parentNode可能是你正在寻找的.

链接到parentNode的currentTarget
链接

Answer 2

要使用元素的父级,请使用parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

Answer 3

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

Answer 4

function getParent(event)
{
   return event.target.parentNode;
}

示例: 1.document.body.addEventListener("click", getParent, false);返回您单击的当前元素的父元素.

2. 如果你想在任何函数里面使用,那么传递你的事件并调用这样的函数: function yourFunction(event){ var parentElement = getParent(event); }