0

Encontré en ésta misma web, una solución para detectar el click en un div hijo, usando jQuery. Si colocas el script debajo del enlace:

<script src="/storage/sdcard0/programacion/lib/frameworks/js/jquery-3.6.0.min.js">
  </script>

funciona perfectamente, pero si el enlace está abajo no me funciona. Bien, eso no es problema, pero quiero saber hacerlo sin jQuery; sin recibir los id de los div padres y si es posible sin definir clase >class . El código es el siguiente:

jQuery:

$(function () {
$(document).on('click', '.box', function () {
       alert($(this).attr('id'));
    });
});

CDNJS y demás:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper-content" id="Categoria">
            <div class="box" id="Music"><i class="icono fas fa-music"></i><p>Audio & Video</p></div>
            <div class="box b" id="Sport"><i class="icono fas fa-futbol"></i><p>Deportes</p></div>
            <div class="box c"id="Home"><i class="icono fas fa-home"></i><p>Hogar</p></div>
            <div class="box d" id="Games"><i class="icono fas fa-gamepad"></i><p>Videojuegos</p></div>
            <div class="box e" id="Tecno"><i class="icono fas fa-laptop"></i><p>Tecnologia</p></div>
            <div class="box f"  id="Licor"><i class="icono fas fa-beer"></i><p>Licores</p></div>
            <div class="box g" id="Tools"><i class="icono fas fa-toolbox"></i><p>Herramientas</p></div>
            <div class="box h" id="Instrumentos"><i class="icono fas fa-guitar"></i><p>Instrumentos</p></div>
            <div class="box i" id="Recaudo"><i class="icono fas fa-bus-alt"></i><p>Recaudo Monterrey</p></div>

        </div>

Y lo siguiente es mi verdadero código, al que yo le quiero agregar la función:

<div id="PadreDepadres" align="center" style="display:block">

<!-- ============================ -->
    <!-- Inicio de contenedor A -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
    <div id="PadreA" align="" style="width:300px;
margin:8px; border-radius:6px; padding:8px;
background-color:cyan; color:black;">

<small>Opción 1.1</small><br>
<span style="color:red"><b>&nbsp;Otro texto aquí</b></span>
<hr />
<!-- ———————————————— -->

    <!-- Botón: Entrar -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
    <div id="hijoA" style="width:100px; border:2px solid;
border-color:gold; border-radius:10px;
padding:2px; background-color:#555fff;
font-weight:bold; color:white;">Entrar</div>
</div>
    <!-- Final del contenedor -->
<!-- ============================ -->

<!-- ============================ -->
    <!-- Inicio de contenedor B -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
    <div id="PadreB" align="" style="width:300px;
margin:8px; border-radius:6px; padding:8px;
background-color:cyan; color:black;">

<small>Opción 2.1</small><br>
<span style="color:red"><b>&nbsp;Otro texto aquí</b></span>
<hr />
<!-- ———————————————— -->

    <!-- Botón: Entrar -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
    <div id="hijoB" style="width:100px; border:2px solid;
border-color:gold; border-radius:10px;
padding:2px; background-color:#555fff;
font-weight:bold; color:white;">Entrar</div>
</div>
    <!-- Final del contenedor -->
<!-- ============================ -->
</div>

2 respuestas 2

2

Una solución sin jQuery sería la siguiente:

...Como se puede ver, en realidad no define class, yo comentaba que si será posible sin definir class...

Considerando lo pedido , cambié getElementsByClassName por querySelectorAll y este método te va a resultar muy familiar, sirve para obtener todos los elementos según un selector, este selector puede ser cualquier selector válido de css, por ejemplo

// todos los elementos con class "box"
var elements = document.querySelectorAll(".box");

// todos los elementos HTML p
var elements = document.querySelectorAll("p");

Para ahorrar texto, los selectores válidos son los siguientes: https://www.w3schools.com/cssref/css_selectors.asp

... Si, son los mismos que puedes usar con jQuery

// var elements = document.getElementsByClassName("box");
var elements = document.querySelectorAll(".box");

var myFunction = function() {
    var attribute = this.getAttribute("id");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}
<div class="wrapper-content" id="Categoria">
            <div class="box" id="Music"><i class="icono fas fa-music"></i><p>Audio & Video</p></div>
            <div class="box b" id="Sport"><i class="icono fas fa-futbol"></i><p>Deportes</p></div>
            <div class="box c"id="Home"><i class="icono fas fa-home"></i><p>Hogar</p></div>
            <div class="box d" id="Games"><i class="icono fas fa-gamepad"></i><p>Videojuegos</p></div>
            <div class="box e" id="Tecno"><i class="icono fas fa-laptop"></i><p>Tecnologia</p></div>
            <div class="box f"  id="Licor"><i class="icono fas fa-beer"></i><p>Licores</p></div>
            <div class="box g" id="Tools"><i class="icono fas fa-toolbox"></i><p>Herramientas</p></div>
            <div class="box h" id="Instrumentos"><i class="icono fas fa-guitar"></i><p>Instrumentos</p></div>
            <div class="box i" id="Recaudo"><i class="icono fas fa-bus-alt"></i><p>Recaudo Monterrey</p></div>

        </div>

4
  • Saludos @LPZadkiel , está muy buena esa opción. Edité mi pregunta pues encontré importante dar más detalles. Como se puede ver, en realidad no define class, yo comentaba que si será posible sin definir class. ¿Es fundamental en este caso o siempre es importante definir class? ¿Me sirve en mi caso la clase 'box'? Gracias por tu tiempo y atenciones, espero respuesta para decidir.
    – Triplex
    Commented el 22 oct. 2021 a las 8:46
  • Hola @LPZadkiel encontré este método usando tu ejemplo de esta forma: var elements = document.getElementsByTagName("div"); var myFunction = function(e) { e.stopPropagation(); var attribute = this.getAttribute("id"); aunque también da el fallo de que es necesario ponerlo debajo, pues arriba del div no funciona, solo debajo. De todos modos, tomaré tu respuesta como aceptada, porque me dio la base que necesitaba, solo agregé e.stopPropagation(); para usar las etiquetas div. Gracias. Si tienes idea de por qué no funciona arriba y solo debajo de los div, cuéntame por favor.
    – Triplex
    Commented el 22 oct. 2021 a las 15:18
  • @Triplex en ese caso puedes usar querySelectorAll, te dejo el ejemplo editando la respuesta
    – LPZadkiel
    Commented el 22 oct. 2021 a las 18:47
  • Bien, añadiendo: window.addEventListener("load", function() { entrar(); //entrar() sería mi función }); puedo colocar el código en cualquier posición. @LPZadkiel según el enlace a los selectores, comprobé si funcionaría de este modo: ("div>div>div") teniendo en cuenta que los "botones" son divs dentro de dos divs antecesores (en el código último que indiqué). Quedaría así: var elements = document.querySelectorAll("div>div>div"). Así me sirvió tu código, gracias también por la info de selectores CSS.
    – Triplex
    Commented el 23 oct. 2021 a las 15:46
1

Una solución incluso para elementos dinámicos podría ser agregar el evento clic al padre, después hacer un queryselectorall a los elementos que necesites e iterarlos, capturar el target del click y preguntar si pertenece al elemento hijo.

const contenedor = document.getElementById('padre');
contenedor.addEventListener('click', event => {
   const target = event.target;
   const hijos = contenedor.querySelectorAll('hijos'); // podría ser *contenedor.children* si son hijos directos
   Array.from(hijos).forEach(hijo => {
      if(hijo.contains(target)){
         // Aquí ejecutas lo que necesitas
      }
   })
})

Podrías cambiar el contenedor simplemente con document

Con esto te encargas de que cada que se agregue un elemento nuevo, este reciba el evento; si necesitas el elemento hijo, este ya lo tienes en el forEach

1
  • Muy bueno, gracias, lo revisaré. Sería una actualización.
    – Triplex
    Commented el 8 nov. 2022 a las 23:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.