Können Sie mit event.target auf ein übergeordnetes Element eines Elements abzielen?

Ich versuche, das innerHTML meiner Seite so zu ändern, dass es das innerHTML des Elements wird, auf das ich klicke. Das einzige Problem ist, dass ich möchte, dass es das gesamte Element übernimmt, wie z.

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

Während der Code, den ich in Javascript geschrieben habe:

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

zielt auf das spezifische Element ab, auf das ich klicke.

Was ich erreichen möchte, ist, wenn ich auf eine beliebige Stelle im <section>Element klicke, dass das innerHTML des gesamten Elements und nicht das spezifische Element, auf das ich geklickt habe, verwendet wird.

Ich würde annehmen, dass es etwas mit der Auswahl des übergeordneten Elements des angeklickten Elements zu tun hat, aber ich bin mir nicht sicher und kann online nichts finden.

Wenn möglich, möchte ich mich von JQuery fernhalten

Ich denke, was Sie brauchen, ist die zu verwenden event.currentTarget. Dies enthält das Element, das tatsächlich den Ereignis-Listener enthält. Wenn also das Ganze <section>den Ereignislistener hat, event.targetwird das angeklickte Element sein, das <section>wird in event.currentTarget.

Andernfalls parentNodekönnte es das sein, wonach Sie suchen.

Link zu currentTarget
Link zu parentNode

Um das übergeordnete Element eines Elements zu verwenden, verwenden Sie parentElement:

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

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

Beispiele: 1. document.body.addEventListener("click", getParent, false);Gibt das übergeordnete Element des aktuellen Elements zurück, auf das Sie geklickt haben.

2. Wenn Sie innerhalb einer Funktion verwenden möchten, übergeben Sie Ihr Ereignis und rufen Sie die Funktion wie folgt auf: function yourFunction(event){ var parentElement = getParent(event); }

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

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

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