2

tengo un problema con un evento click que estoy creando

var o = {
 categorias: document.querySelectorAll(".categorias-tmc"),
 productos: document.querySelectorAll("#productos-tmc div"),
 cat: null,

}

var m = {

 inicio: function(){
  for(var i = 0; i < o.categorias.length;i++){

    o.categorias[i].addEventListener("click", m.seleccion)
  }
 },

 seleccion: function(e){
    o.cat = e.target.getAttribute("cat"),
    console.log(o.cat)
 }

}

m.inicio();

El problema es que en el HTML dentro de el div tengo un img que al dar clic no reproduce el código. Gracias.

Hola, que tal gracias a todos por sus respuestas, a continuacion el codigo html y css

<div>
    <div class="categorias-tmc column one-sixth" cat="alimenticios">
        <img src="" alt="productos alimenticios">
        <h2>PRODUCTOS ALIMENTICIOS</h2>
    </div>
    <div class="categorias-tmc column one-sixth" cat="belleza">
        <img src="" alt="belleza y salud">
        <h2>BELLEZA Y SALUD</h2>
    </div>
    <div class="categorias-tmc column one-sixth" cat="libros">
        <img src="" alt="libros y gadgets">
        <h2>LIBROS Y GADGETS</h2>
    </div>
    <div class="categorias-tmc column one-sixth" cat="accesorios">
        <img src="" alt="ropa y accesorios">
        <h2>ROPA Y ACCESORIOS</h2>
    </div>
    <div class="categorias-tmc column one-sixth" cat="artesanales">
        <img src="" alt="productos artesanales">
        <h2>PRODUCTOS ARTESANALES</h2>
    </div>
    <div class="categorias-tmc column one-sixth">
        <img src="" alt="regalos">
        <h2>OH!!!</h2>
    </div>
</div>

.categorias-tmc {
    box-shadow: 0 0 6px #0000003b;
    background: white;
    transition: 0.2s ease;
    min-height: 230px;
    cursor: pointer;
}
.categorias-tmc:hover {
    transform: scale(1.1);
}
.categorias-tmc h2 {
    font-size: 18px;
    line-height: 18px;
}
.categorias-tmc img {
    width: 100px;
    margin-bottom: 30px;
}
.categorias-tmc img {
    width: 100px;
    margin: 30px 0;
}
.categorias-tmc:nth-child(odd) h2 {
    color: #53c9ff;
}
.categorias-tmc:nth-child(even) h2 {
    color: #451490;
}
.no-margin-h .one-sixth.column {
    width: 16.666%;
}

disculpen si estoy usando la plataforma mal realmente soy nuevo, un saludo !

4
  • Hola Sebastián, podrías compartir tu código HTML? Commented el 18 sept. 2018 a las 20:15
  • Hay varias cosas que pueden producir este error,usualmente problemas de css, como que el div que tiene el evento tenga tamaño 0x0 a pesar de que sus hijos si tengan tamaño y sean visibles, puedes verificar si este es tu caso revisando en el inspector si el elemento padre tiene tamaño 0, puedes solucionar eso especificando el tamaño por css o definiendo la propiedad overflow de css, esto a veces resuelve el problema. Te recomindo que publiques el codigo html y css que te da el problema a fin de que podamos replicarlo y darte una mejor respuesta. Commented el 18 sept. 2018 a las 20:20
  • Brother, gracias por tomar tiempo para leer las preguntas de la comunidad, pero como no estás proporcionando una respuesta... lo mejor es añadir un comentario ;) Commented el 18 sept. 2018 a las 20:27
  • :( lo intente pero el sistema no me deja por tener menos de 50pts de preputacion, soy nuevo, por lo que para tener acceso a comentar tenia que dar una respuesta Commented el 18 sept. 2018 a las 20:29

1 respuesta 1

2

Cuando declaras el listener sobre los elementos con clase categorias-tmc el listener efectivamente se propaga a todos los hijos.

Sin embargo, hay que tener en cuenta que el evento que se envía al handler tiene como propiedad target al elemento que gatilla la acción. Vale decir:

  • Click en la imagen
  • Se gatilla m.seleccion(e)
  • e.target es la imagen
  • la imagen no tiene atributo cat
  • KABOOM

Pero no todo está perdido. Cuando declaras un listener, la variable this dentro del handler apunta al emento original sobre el cual se declaró el listener:

var m = {
      inicio: function () {
        for (var i = 0; i < o.categorias.length; i++) {
          o.categorias[i].addEventListener("click", m.seleccion)
        }
      },

      seleccion: function (e) {
        o.cat = this.getAttribute("cat"),
        console.log(o.cat)
      }
 }

Prueba esa versión.

var o = {
      categorias: document.querySelectorAll(".categorias-tmc"),
      productos: document.querySelectorAll("#productos-tmc div"),
      cat: null,

    }

    var m = {

      inicio: function () {
        for (var i = 0; i < o.categorias.length; i++) {

          o.categorias[i].addEventListener("click", m.seleccion)
        }
      },

      seleccion: function (e) {
        o.cat = this.getAttribute("cat"),
          console.log(o.cat)
      }

    }

    m.inicio();
 
.categorias-tmc {
      box-shadow: 0 0 6px #0000003b;
      background: white;
      transition: 0.2s ease;
      min-height: 50px;
      cursor: pointer;
      float: left;
    }

    .categorias-tmc:hover {
      transform: scale(1.1);
    }

    .categorias-tmc h2 {
      font-size: 15px;
      line-height: 15px;
      margin: 5px;
      padding: 5px;
    }

    .categorias-tmc img {
      width: 100px;
      margin: 5px 0;
    }

    .categorias-tmc:nth-child(odd) h2 {
      color: #53c9ff;
    }

    .categorias-tmc:nth-child(even) h2 {
      color: #451490;
    }

    .no-margin-h .one-sixth.column {
      width: 49%;
    }
  
    <div class="no-margin-h" style="width: 600px;margin:0 auto;">
      <div class="categorias-tmc column one-sixth" cat="alimenticios">
        <img src="https://via.placeholder.com/350x65/ff0000" alt="productos alimenticios">
        <h2>PRODUCTOS ALIMENTICIOS</h2>
      </div>
      <div class="categorias-tmc column one-sixth" cat="belleza">
        <img src="https://via.placeholder.com/350x65/336699" alt="belleza y salud">
        <h2>BELLEZA Y SALUD</h2>
      </div>
      <div class="categorias-tmc column one-sixth" cat="libros">
        <img src="https://via.placeholder.com/350x65/00ff00" alt="libros y gadgets">
        <h2>LIBROS Y GADGETS</h2>
      </div>
      <div class="categorias-tmc column one-sixth" cat="accesorios">
        <img src="https://via.placeholder.com/350x65/0000ff" alt="ropa y accesorios">
        <h2>ROPA Y ACCESORIOS</h2>
      </div>
      <div class="categorias-tmc column one-sixth" cat="artesanales">
        <img src="https://via.placeholder.com/350x65/ff00ff" alt="productos artesanales">
        <h2>PRODUCTOS ARTESANALES</h2>
      </div>
      <div class="categorias-tmc column one-sixth">
        <img src="https://via.placeholder.com/350x65/00ffff" alt="regalos">
        <h2>OH!!!</h2>
      </div>
    </div>
 

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.