1

Estoy tomando un elemento con JavaScript

<div class="game-container" id="paper">
   <span class="game__paper" >
     <span class="game__box-shadow">
         <img src="../images/icon-paper.svg" alt="Paper">
     </span>
   </span>
</div>

const paperId = document.getElementById('paper');

function choiceGun(event) {

    console.log(event);
    paper = event.target.id;
    console.log(rock);

  }

paperId.addEventListener('click', choiceGun);

y estoy escuchando el evento click en el div (game-container) que sería el container de todo el bloque, pero le doy click y el event que sale en la consola, sale con el elemento game__paper o gamebox-shadow o con el elemento game__container y eso depende de que parte de del elemento game__container le de click.

Yo necesito que cuando le de click a game__paper solo seleccione ese elemento.

3
  • Saludos. Mmmm, de lo poco que se te comento; no pusiste el elemento cuyo ìd es rock por consiguiente no se sabe; asi como tampoco como asignas (por código o directamente en un evento de elemento) la función choiceGundesde donde se dispara. Si lo pones a un div sus hijos igual lo lanzan, salvo valides por ejemplo que se evalue el id y si corresponde al del div se ejecute completo. Commented el 23 jun. 2020 a las 17:58
  • Ya formule mejor la preguntas, eso espero. Commented el 23 jun. 2020 a las 19:28
  • pues añade el evento click en el elemento con la clase game__paper en vez de paper
    – hawks
    Commented el 23 jun. 2020 a las 20:55

1 respuesta 1

1

Comentarios:

  • No veo la necesidad o utilidad de que un span sea contenedor de otro span que a su vez contiene una imagen
  • En ese sentido y tal vez para organizar mejor el código sería:
    • un solo span que envuelva a la imagen
  • Sería un tanto difícil aplicar un click sobre dicho elemento (el span) por que su ancho estará delimitado por el contenido que en ella exista
  • En ese sentido tal vez un elemento de bloque sea una mejor opción ya que de manera inicial ocupa todo el ancho disponible, lo cual te daría opción o espacio para el evento deseado
  • Si deseamos seguir por la línea del span, entonces al borde deberás darle un ancho para diferenciarlo de su contenido, que en este caso es la imagen

Propuesta:

    <style>
      .game-container {
        border: 10px solid crimson;
        padding: 40px;
      }
      .elemento-no {
        border: 1px solid teal;
        width: 50%;
      }
      .game__paper {
        border: 10px solid ;
        margin: 10px;
      }
      p.game__paper {
        border: 1px solid;
      }
    </style>
    
    <div class="game-container" id="paper">
       <span class="game__paper" >
             <img src="../images/icon-paper.svg" alt="Paper">
       </span>
       <span class="game__paper" >
             <img src="../images/icon-paper.svg" alt="Paper">
       </span>
       <p class="game__paper" >
             <img src="../images/icon-paper.svg" alt="Paper">
       </p>
       <p class="elemento-no">
         Hola Mundo
       </p>
    </div>
    
    
    <script>
      let divContenedor = document.getElementById('paper');
      
      divContenedor.addEventListener('click', (evento) => {
        (evento.target.className != 'game__paper') 
          ? (console.log('Aqui el click no'))
          : (console.log('Aqui el click si'))
      });
    </script>

Tal vez en este sentido te convenga mas apuntar a la imagen mediante una clase, pues ya que le insertes contenido multimedia tendrás todo ese espacio para capturar el evento click.

Otra propuesta:

    <style>
      .game-container {
        border: 10px solid crimson;
        padding: 40px;
      }
      .elemento-no {
        border: 1px solid teal;
        width: 50%;
      }
      .game__paper {
        margin: 10px;
      }
    </style>
    
    <div class="game-container" id="paper">
       <span class="game__paper" >
             <img class="game__paper-image" src="../images/icon-paper.svg" alt="Paper">
       </span>
       <span class="game__paper" >
             <img class="game__paper-image" src="../images/icon-paper.svg" alt="Paper">
       </span>
       <p class="elemento-no">
         Hola Mundo
       </p>
    </div>
    
    
    <script>
      let divContenedor = document.getElementById('paper');
      
      divContenedor.addEventListener('click', (evento) => {
        (evento.target.className != 'game__paper-image') 
          ? (console.log('Aqui el click no'))
          : (console.log('Aqui el click si'))
      });
    </script>

Lecturas recomendadas

0

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.