คุณสามารถกำหนดเป้าหมายองค์ประกอบหลักขององค์ประกอบโดยใช้ 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);    
}