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

【问题标题】：Can you target an elements parent element using event.target?您可以使用 event.target 定位元素父元素吗？
【发布时间】：2023-03-08 08:44:01
【问题描述】：

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

【解决方案1】：

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

否则parentNode 可能就是您要查找的内容。

link to currentTarget
link to parentNode

【讨论】：

救了我一天！， event.target 是鼠标上的最小标签， event.currentTarget 是触发事件的标签
似乎违反直觉。我认为currentTarget 应该代表被点击的元素，而target 应该是事件的设置。
这正是我要找的，首先谢谢你，但我有一个问题，当我在函数中记录事件对象时，currentTarget 为空，但我仍然能够从中获取 id我的数据集属性，记录的事件是否仍然是相同的 e.target？

【解决方案2】：

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

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

【讨论】：

虽然这回答了 OP 的问题，但我认为 OP 的问题应该通过currentTarget 来解决。
这给了我顶级父元素，这不是我想要的，谢谢你，我会记住这一点，以便我以后的编码

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

如果你想在任何函数中使用，那么传递你的事件并像这样调用函数： function yourFunction(event){ var parentElement = getParent(event); }

【讨论】：

【解决方案5】：

$(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
    }
})

【讨论】：

【解决方案6】：

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);    
}

【讨论】：