Чи можете ви націлити елементи на батьківський елемент за допомогою event.target?

Я намагаюся змінити внутрішній HTML моєї сторінки, щоб він став внутрішнім HTML елемента, на який я натискаю, єдина проблема полягає в тому, що я хочу, щоб він взяв цілий елемент, такий як:

<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>елементі, що він буде використовувати внутрішній HTML цілого елемента, а не конкретний, який я натиснув.

Я вважаю, це щось пов’язане з вибором батьківського елемента, на який клацнули, але я не впевнений і не можу знайти нічого в Інтернеті.

Якщо це можливо, я хотів би триматися подалі від JQuery

Я думаю, що вам потрібно використовувати event.currentTarget. Він міститиме елемент, який насправді має прослуховувач подій. Так , якщо в цілому <section>має EventListener event.targetбуде Clicked елемента, то <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);    
}