Bạn có thể nhắm mục tiêu một phần tử gốc của phần tử bằng cách sử dụng event.target không?

Tôi đang cố gắng thay đổi innerHTML của trang của mình thành InternalHTML của phần tử tôi nhấp vào, vấn đề duy nhất là tôi muốn nó lấy toàn bộ phần tử như:

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

Trong khi mã mà tôi đã viết bằng javascript:

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

sẽ nhắm mục tiêu phần tử cụ thể mà tôi nhấp vào.

Những gì tôi muốn đạt được là khi tôi nhấp vào bất kỳ vị trí nào trong <section>phần tử, nó sẽ lấy InternalHTML của toàn bộ phần tử chứ không phải là cái cụ thể mà tôi đã nhấp vào.

Tôi cho rằng đó là điều gì đó liên quan đến việc chọn phần tử mẹ của phần tử được nhấp vào nhưng tôi không chắc và không thể tìm thấy bất kỳ thứ gì trực tuyến.

Nếu có thể, tôi muốn tránh xa JQuery

Tôi nghĩ rằng những gì bạn cần là sử dụng event.currentTarget. Điều này sẽ chứa phần tử thực sự có trình nghe sự kiện. Vì vậy, nếu toàn bộ <section>có eventlistener event.targetsẽ là phần tử được nhấp vào, phần tử <section>sẽ ở trong event.currentTarget.

Nếu không parentNodecó thể là những gì bạn đang tìm kiếm.

liên kết tới currentTarget
liên kết đến parentNode

Để sử dụng cha của một phần tử, hãy sử dụng parentElement:

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

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

Ví dụ: 1. document.body.addEventListener("click", getParent, false);trả về phần tử mẹ của phần tử hiện tại mà bạn đã nhấp vào.

2. Nếu bạn muốn sử dụng bên trong bất kỳ hàm nào, hãy chuyển sự kiện của bạn và gọi hàm như sau: 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);    
}