你可以使用event.target来定位一个元素的父元素吗？

Question

我正在尝试将页面的innerHTML更改为我点击的元素的innerHTML。唯一的问题是，我希望它能够获取整个元素，例如：

    <section 
      class="homeItem"> 
      <div>
        <!-- more HTML here -->
      </div>
    </section>

而我所编写的Javascript代码：

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

将会针对我点击的特定元素。

我想要实现的是，当我点击<section>元素的任何位置时，它将获取整个<section>元素的innerHTML，而不是我点击的特定元素。

我猜想这可能与选择被点击元素的父元素有关，但我不确定并且在网上找不到任何相关信息。

如果可能的话，我希望避免使用jQuery。

- Adam

Answer 1

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

否则，parentNode可能是你要查找的内容。

currentTarget链接
parentNode链接

- donnywals

---

救了我的一天！event.target 是鼠标指向的最小标签，而 event.currentTarget 则是触发事件的那个标签。 - Dee

看起来有些违反直觉。我认为 currentTarget 应该代表被点击的元素，而 target 应该是事件所设置的元素。 - Randall Coding

那正是我在寻找的，首先谢谢你，但我有一个问题，当我在我的函数中记录事件对象时，currentTarget为空，但仍然能够从数据集属性中获取id，记录的事件是否仍然是e.target？ - amdev

Answer 2

使用 parentElement 来访问一个元素的父元素：

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

- KJ Price

---

虽然这个回答解决了OP的问题，但我认为应该用currentTarget来解决OP的问题。 - donnywals

这给了我最顶层的父元素，这不是我想要的，无论如何还是谢谢你，我会记住这个对我的未来编码有帮助。 - Adam

Answer 3

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

- David

Answer 4

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

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

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

- Abdul Alim

Answer 5

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

Answer 6

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

---

"If possible, I would like to stay away from JQuery." - undefined

Answer 7

你可以使用closest()来获取你想要的祖先/父级元素。

const target = event.target;
const parent = target.closest('section');

- Rajesh Ravichandran