¿Puedes apuntar a un elemento padre de elementos usando event.target?

85

Estoy tratando de cambiar el innerHTML de mi página para convertirme en el innerHTML del elemento en el que hago clic, el único problema es que quiero que tome todo el 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 el código que he escrito en javascript:

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

apuntará al elemento específico en el que hago clic.

Lo que me gustaría lograr es que cuando hago clic en cualquier parte del <section>elemento, tomará el HTML interno de todo el elemento en lugar del específico en el que hice clic.

Supongo que tiene algo que ver con la selección del elemento principal del que se hace clic, pero no estoy seguro y no puedo encontrar nada en línea.

Si es posible, me gustaría mantenerme alejado de JQuery

javascript html

— Adán
fuente

150

Creo que lo que necesitas es usar el event.currentTarget. Este contendrá el elemento que realmente tiene el detector de eventos. Entonces, si el conjunto <section>tiene, el eventlistener event.targetserá el elemento en el que se hizo clic, <section>estará en event.currentTarget.

De parentNodelo contrario, podría ser lo que estás buscando.

enlace a currentTarget
enlace a parentNode

— donnywals
fuente

5

Esto ha hecho exactamente lo que quería, ¡gracias! Aceptaré la respuesta una vez que se acabe el tiempo.

— Adam

2

¡Me salvó el día !, event.target es la etiqueta más pequeña en el mouse, event.currentTarget es la que tiene el evento activado

— datdinhquoc

1

Parece contrario a la intuición. Creo que currentTargetdebería representar el elemento en el que se hizo clic, mientras que targetdebería ser en lo que se estableció el evento.

— Randall Coding

eso fue exactamente lo que busqué, gracias primero, pero tengo una pregunta, cuando registro el objeto de evento en mi función, el objetivo actual es nulo pero aún puedo obtener la identificación de mi atributo de conjunto de datos, es el evento registrado sigue siendo el mismo e.target?

— a_m_dev

51

Para usar el padre de un elemento, use parentElement:

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

— Precio KJ
fuente

2

Si bien esto responde a la pregunta de OP, creo que el problema de OP debería resolverse con currentTarget.

— donnywals

Esto me dio el elemento principal de nivel superior que no es lo que estaba buscando, gracias de todos modos lo tendré en cuenta para mi futura codificación

— Adam

10

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

Ejemplos: 1. document.body.addEventListener("click", getParent, false);devuelve el elemento padre del elemento actual en el que ha hecho clic.

Si desea usar dentro de cualquier función, pase su evento y llame a la función de esta manera: function yourFunction(event){ var parentElement = getParent(event); }

— Abdul Alim
fuente

8

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

— David
fuente

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
fuente

-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
fuente