En mi sitio web, tengo algunos elementos div con algo de contenido. Se supone que se puede hacer clic en cada uno de los elementos. Podría agregar un detector de eventos separado a cada uno, pero preferiría tener un solo detector de eventos adjunto al contenedor. Para explicar mejor la estructura del documento, he agregado un ejemplo a continuación.
<div id="container"> <div> <h1>Element 1</h1> <p>Lorem ipsum...</p> </div> <div> <h1>Element 2</h1> <p>...dolor sit amet...</p> </div> </div> Ahora mi pregunta es la siguiente: sé que usar event.target me da el elemento real en el que se ha hecho clic, que, cuando se usa un detector de eventos que está adjunto al div con el container de ID, podría ser el contenedor, uno de los niños directos, o los elementos de texto dentro de ellos. ¿Cómo puedo determinar en cuál de los elementos div internos, si hay alguno, hizo clic el usuario, incluso si el objetivo no es el div en sí?
Si hay una solución diferente/más simple usando JQuery, también estaría interesado en eso.
Si no necesita que el contenido de cada div (p y h1) tenga elementos interactivos (como elementos de formulario), puede agregar un contenedor de div adicional en el que no se puede hacer clic :). Ahora todos los objetivos de clic serán los primeros divs secundarios.
document.querySelector("#container").addEventListener("click", (e) => console.log(e.target)) .unclickable { pointer-events:none; } <div id="container"> <div> <div class="unclickable"> <h1>Element 1</h1> <p>Lorem ipsum...</p> </div> </div> <div> <div class="unclickable"> <h1>Element 2</h1> <p>Lorem ipsum...</p> </div> </div> </div>Dados sus comentarios bajo la pregunta, su objetivo es encontrar una forma efectiva de determinar si el usuario hizo clic en el div externo o en uno de los elementos secundarios.
Para hacerlo, compare la propiedad de target del evento, que es el elemento que generó el evento, con la propiedad de destino currentTarget , que siempre será el elemento al que estaba vinculado el evento. La lógica sería algo así:
$('#container').on('click', e => { if (e.target == e.currentTarget) { console.log('clicked on parent'); } else { console.log(`clicked on child element - ${e.target.tagName}`); } }); #container { border: 1px solid #000; padding: 10px; } #container > div { display: inline-block; border: 1px solid #CCC; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div> <h1>Element 1</h1> <p>Lorem ipsum...</p> </div> <div> <h1>Element 2</h1> <p>...dolor sit amet...</p> </div> </div>Tenga en cuenta que el CSS en el ejemplo anterior es solo para hacer que los límites de cada elemento sean más visibles.