Tengo debajo de HTML:
<div id="parent"> <div> <div> //needs to get the inner HTML of this. </div> <p> </p> </div> <div> <div> //needs to get the inner HTML of this. </div> <p> </p> </div> <div> <div> //needs to get the inner HTML of this. </div> <p> </p> </div> ...10 more </div>¿Podría alguien confirmar si es posible tener un detector de eventos de un clic para capturar el HTML interno del nieto del nodo principal al hacer clic con el mouse?
He intentado usar a continuación
document.getElementById('parent').addEventListener('click', event => { // what to do here to get the inner HTML of granchild div })El problema con el enfoque anterior es que si hago clic en la etiqueta p del nieto, aparece el html interno de la etiqueta p, pero siempre quiero el html interno del primer div.
Utilice este código.
document.getElementById("parent").addEventListener("click", function() { console.log(this.children[0].innerHTML); });Puede usar event.target.closest("div") y verificar si tiene firstElementChild , significa que hace clic en la etiqueta p y firstElementChild le da el div correcto y si es null significa que ya hizo clic en corrcet div .
Aquí está la muestra de trabajo:
document.getElementById('parent').addEventListener('click', event => { var firstDiv = event.target.closest("div").firstElementChild; if(!firstDiv) firstDiv = event.target; console.log(firstDiv.innerHTML); }) <div id="parent"> <div> <div> 1. needs to get the inner HTML of this. </div> <p> 1.P </p> </div> <div> <div> 2.needs to get the inner HTML of this. </div> <p> 2.P </p> </div> <div> <div> 3.needs to get the inner HTML of this. </div> <p> 3.P </p> </div> </div>Si desea adjuntar un detector de eventos a cada uno de los div nietos, entonces
document.getElementById('.grandchild-div-id').forEach(item => { item.addEventListener('click', event => { //handle click }) })