您可以使用event.target定位元素的父元素吗？

85

我正在尝试将页面的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

javascript html

— 亚当
source

150

我认为您需要使用event.currentTarget。这将包含实际具有事件侦听器的元素。因此，如果整个<section>事件监听器event.target都将是clicked元素，<section>则将在中event.currentTarget。

否则parentNode可能就是您要找的东西。

链接到currentTarget
链接到parentNode

— 唐尼沃尔斯
source

5

正是我想要的，谢谢！计时器到时，我会接受答案。

— 亚当

2

救了我一天！event.target是鼠标上最小的标签，event.currentTarget是触发事件的标签

— daddinhquoc

1

似乎违反直觉。我认为currentTarget应该代表所单击的元素，而target应该是事件设置的对象。

— 兰德尔编码

那正是我在寻找的东西，首先谢谢您，但是我有一个问题，当我在函数中记录事件对象时，currentTarget为null，但是我仍然能够从数据集属性中获取ID，是记录的事件还是相同的e.target？

— a_m_dev

51

要使用元素的父元素，请使用parentElement：

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

— KJ价格
source

2

虽然这回答了OP的问题，但我认为OP的问题应使用解决currentTarget。

— donnywals

这给了我一个顶级的父元素，这不是我想要的，无论如何，谢谢您，我会在以后的编码中牢记这一点

— Adam

10

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

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

如果要在任何函数内部使用，请传递事件并像下面这样调用函数： function yourFunction(event){ var parentElement = getParent(event); }

— 阿卜杜勒·阿林（Abdul Alim）
source

8

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

— 大卫
source

0

$(document).on("click", function(event){
   var a = $(event.target).parents();
   var flaghide = true;
    a.each(function(index, val){
       if(val == $(container)[0]){
           flaghide = false;
        }
    });
    if(flaghide == true){
        //required code
    }
})

— Shubham Rungta
source

-1

var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}

— Vanga Kiran Kumar Reddy
source