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

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.

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