event.targetを使用して要素の親要素をターゲットにできますか？

ページの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から離れたいと思います

必要なのはを使用することだと思いますevent.currentTarget。これには、実際にイベントリスナーを持つ要素が含まれます。したがって、全体<section>にeventlistenerevent.targetがクリックされた要素である場合、<section>はになりますevent.currentTarget。

そうでなければparentNodeあなたが探しているものかもしれません。

currentTargetへのリンクparentNodeへの
リンク

要素の親を使用するには、次を使用しますparentElement。

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

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

例： 1 document.body.addEventListener("click", getParent, false);。クリックした現在の要素の親要素を返します。

2. 関数内で使用する場合は、イベントを渡して次のように関数を呼び出します。 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);    
}