Puoi targetizzare un elemento genitore di elementi utilizzando event.target?

87

Sto cercando di cambiare l'InnerHTML della mia pagina per diventare l'InnerHTML dell'elemento su cui clicco, l'unico problema è che voglio che prenda l'intero elemento come:

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

Considerando che il codice che ho scritto in javascript:

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

mirerà all'elemento specifico su cui faccio clic.

Quello che vorrei ottenere è quando clicco su un punto qualsiasi <section>dell'elemento, che prenderà l'HTML interno dell'intero elemento piuttosto che quello specifico su cui ho fatto clic.

Presumo che abbia a che fare con la selezione dell'elemento genitore di quello su cui si fa clic, ma non sono sicuro e non riesco a trovare nulla online.

Se possibile, vorrei stare lontano da JQuery

javascript html

— Adamo
fonte

163

Penso che ciò di cui hai bisogno sia usare il file event.currentTarget. Questo conterrà l'elemento che ha effettivamente il listener di eventi. Quindi se l'intero <section>ha il listener di eventi event.targetsarà l'elemento cliccato, <section>sarà in event.currentTarget.

Altrimenti parentNodepotrebbe essere quello che stai cercando.

link to currentTarget
collega a parentNode

— donnywals
fonte

5

Questo ha fatto esattamente quello che volevo, grazie! Accetterò la risposta una volta che il timer sarà scaduto.

— Adam

2

save me day !, event.target è il tag più piccolo al mouse, event.currentTarget è quello con evento attivato

— datdinhquoc

1

Sembra controintuitivo. Penso che currentTargetdovrebbe rappresentare l'elemento cliccato, mentre targetdovrebbe essere ciò su cui è stato impostato l'evento.

— Codifica Randall

era esattamente quello che cercavo, grazie prima, ma ho una domanda, quando registro l'oggetto evento nella mia funzione, il currentTarget è nullo ma sono comunque in grado di ottenere l'id dal mio attributo del set di dati, è l'evento registrato è ancora lo stesso e.target?

— a_m_dev

53

Per usare il genitore di un elemento usa parentElement:

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

— Prezzo KJ
fonte

2

Sebbene questo risponda alla domanda di OP, penso che il problema di OP dovrebbe essere risolto con currentTarget.

— donnywals

Questo mi ha dato l'elemento genitore di livello superiore che non è quello che stavo cercando, grazie comunque lo terrò a mente per la mia futura programmazione

— Adam

10

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

Esempi: 1. document.body.addEventListener("click", getParent, false);restituisce l'elemento genitore dell'elemento corrente su cui si è fatto clic.

Se vuoi usare all'interno di qualsiasi funzione, passa il tuo evento e chiama la funzione in questo modo: function yourFunction(event){ var parentElement = getParent(event); }

— Abdul Alim
fonte

8

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

— David
fonte

0

$(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
    }
})

— Shubham Rungta
fonte

-1

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);    
}

— Vanga Kiran Kumar Reddy
fonte