Можете ли вы настроить целевой элемент элементов, используя 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

Ответ 1

Я думаю, что вам нужно использовать event.currentTarget. Это будет содержать элемент, на самом деле имеющий прослушиватель событий. Таким образом, если весь <section> имеет eventlistener event.target, будет элемент с кликом, он будет в event.currentTarget.

В противном случае parentNode может быть тем, что вы ищете.

ссылка на currentTarget
ссылка на parentNode

Ответ 2

Чтобы использовать родительский элемент для элемента, используйте parentElement:

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

Ответ 3

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

<сильные > Примеры:1. document.body.addEventListener("click", getParent, false); возвращает родительский элемент текущего элемента, который вы нажали.

Если вы хотите использовать внутри любой функции, передайте свое событие и вызовите функцию следующим образом: function yourFunction(event){ var parentElement = getParent(event); }