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>

내가 자바 스크립트로 작성한 코드는 다음과 같습니다.

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

클릭 한 특정 요소를 타겟팅합니다.

내가 달성하고 싶은 것은 <section>요소의 아무 곳이나 클릭하면 내가 클릭 한 특정 요소가 아닌 전체 요소의 innerHTML을 사용한다는 것입니다.

클릭 한 항목의 부모 요소를 선택하는 것과 관련이 있다고 가정하지만 확실하지 않으며 온라인에서 아무것도 찾을 수 없습니다.

가능하다면 JQuery를 멀리하고 싶습니다.

필요한 것은 event.currentTarget. 여기에는 실제로 이벤트 리스너가있는 요소가 포함됩니다. 전체가 경우에 따라서 <section>의 EventListener가 event.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);    
}