Você pode direcionar um elemento pai de elementos usando event.target?

87

Estou tentando mudar o innerHTML da minha página para se tornar o innerHTML do elemento em que clico. O único problema é que quero que ele pegue todo o elemento, como:

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

Considerando que o código que escrevi em javascript: 

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

terá como alvo o elemento específico em que eu clicar.

O que eu gostaria de conseguir é quando clico em qualquer lugar do <section>elemento, que pegue o innerHTML de todo o elemento, em vez do específico em que cliquei.

Eu presumiria que é algo a ver com a seleção do elemento pai daquele que é clicado, mas não tenho certeza e não consigo encontrar nada online.

Se possível, gostaria de ficar longe de JQuery

javascript html Adão
fonte

Respostas:

163

Acho que você precisa é usar o event.currentTarget. Isso conterá o elemento que realmente possui o ouvinte de evento. Portanto, se o todo <section>tiver o ouvinte de eventos event.targetserá o elemento clicado, o <section>estará em event.currentTarget.

Caso contrário, parentNodepode ser o que você está procurando.

link para currentTarget
link para parentNode

donnywals
fonte
5
Isso fez exatamente o que eu queria, obrigado! Aceitarei a resposta assim que o cronômetro terminar.
Adam
2
save me day !, event.target é a menor tag no mouse, event.currentTarget é aquele com evento acionado
datdinhquoc
1
Parece contra-intuitivo. Eu acho que currentTargetdeve representar o elemento clicado, enquanto targetdeve ser o que o evento foi definido.
Randall Coding
isso foi exatamente o que eu procurei, obrigado primeiro, mas eu tenho uma pergunta, quando eu registro o objeto de evento na minha função, o currentTarget é nulo, mas ainda consigo obter o id do atributo do conjunto de dados, é o evento registrado ainda é o mesmo e.target?
a_m_dev
53

Para usar o pai de um elemento, use parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}
Preço KJ
fonte
2
Embora isso responda à pergunta do OP, acho que o problema do OP deve ser resolvido com currentTarget.
donnywals de
Isso me deu o elemento pai de nível superior, que não é o que eu estava procurando, obrigado de qualquer maneira, vou manter isso em mente para minha codificação futura
Adam
10 
function getParent(event)
{
   return event.target.parentNode;
}

Exemplos: 1. document.body.addEventListener("click", getParent, false);retorna o elemento pai do elemento atual que você clicou.

  1. Se você quiser usar dentro de qualquer função, passe seu evento e chame a função assim: 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