web-dev-qa-db-fra.com

Pouvez-vous cibler un élément parent d'éléments à l'aide de event.target?

J'essaie de changer le innerHTML de ma page pour devenir le innerHTML de l'élément sur lequel je clique, le seul problème est que je veux qu'il prenne l'élément entier, tel que:

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

Considérant que le code que j'ai écrit en javascript: 

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

ciblera l'élément spécifique sur lequel je clique.

Ce que je voudrais réaliser, c’est que lorsque je clique n'importe où sur l’élément <section>, il faudra le innerHTML de l’élément entier plutôt que celui spécifique sur lequel j’ai cliqué.

Je présume que cela a quelque chose à voir avec la sélection de l'élément parent de celui sur lequel l'utilisateur a cliqué mais je ne suis pas sûr et ne trouve rien en ligne.

Si possible, je voudrais rester loin de JQuery

javascripthtml
48
Adam

Je pense que ce dont vous avez besoin est d’utiliser le event.currentTarget. Cela contiendra l'élément qui a réellement le listener d'événement. Donc, si le <section> entier a le eventlistener event.target sera l'élément cliqué, le <section> sera dans event.currentTarget.

Sinon, parentNode pourrait être ce que vous cherchez. 

lien vers currentTarget
lien vers parentNode

81
donnywals

Pour utiliser le parent d'un élément, utilisez parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}
27
KJ Price
function getParent(event)
{
   return event.target.parentNode;
}

Exemples: 1. document.body.addEventListener("click", getParent, false); renvoie l'élément parent de l'élément actuel sur lequel vous avez cliqué.

  1. Si vous souhaitez utiliser une fonction, transmettez votre événement et appelez-la comme suit: function yourFunction(event){ var parentElement = getParent(event); }
8
Raju
handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}
1
David
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);    
}
0
Kiran Kumar Reddy