您可以使用 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可能就是你要找的。

鏈接到當前目標
鏈接到父節點

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); } function yourFunction(event){ var parentElement = getParent(event); }

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

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