0

al hacer click en un div quiero que ocurra algo, pero que no ocurra cuando se da click a otra cosa más pequeña que está dentro del div, ejemplo:

si tengo unos div clickeables que cambian de tamaño, cuando le doy click al input que está dentro igual cambia de tamaño el div. Este addEventListener click está dentro de una función que a su vez está dentro de un bucle for. Intenté varias formas usando this y queryselector y no me resulta.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        .frame {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        input {
            margin: auto;
        }
        p {
            text-align: center;
        }

    </style>
</head>
<body>
<div class="frame">
    
    <input placeholder="same effect here">
    <p>CLICK DIV</p>
    
</div>

<div class="frame">
    
    <input placeholder="same effect here">
    <p>CLICK DIV</p>
    
</div>

<div class="frame">
    
    <input placeholder="same effect here">
    <p>CLICK DIV</p>
    
</div>
</body>
<script>
    const labels = document.querySelectorAll('.frame');
        
    for (var i = 0; i < labels.length; ++i) {
  
        labels[i].addEventListener('click', function touch() {
        
            // resize div
            
            if( this.clientWidth == 200) {
                
                this.style.width = "400px";
        
                this.style.height = "400px";
                
            }else{
                
                this.style.width = "200px";
        
                this.style.height = "200px";
                
            };
            
            //remove the event 
 
 this.firstElementChild.removeEventListener('click', touch);
 
//document.querySelectorAll('input').removeEventListener('click', touch);
            
        });
    };
</script>
</html>

DEMOSTRACION

1
  • 1
    tal vez te convenga mas modificar los eventos para que modifiquen sólo al event.currentTarget ó que simplemente aplique una class css y ahi filtras que elementos se modifican. Commented el 6 oct. 2022 a las 21:51

1 respuesta 1

1

yo suelo definir un listener global y despues manejarlos con un if:

document.addEventListener('click', e =>{
if(e.target.matches('div'){
if( e.target.clientWidth == 200) {
                
                e.target.style.width = "400px";
        
                e.target.style.height = "400px";
                
            }else{
                
                e.target.style.width = "200px";
        
                e.target.style.height = "200px";
                
            };
}
})

Creo que en lugar del if podrias crear una clase y usar el toggle tamb

3
  • 1
    o darle una clase a las div, por ejemplo class='change-dimension', y el target seria (".change-dimension")
    – Carlos
    Commented el 6 oct. 2022 a las 22:15
  • y como podría usar remove EventListener?
    – Palo
    Commented el 7 oct. 2022 a las 0:00
  • 1
    Querés removerlo por algo en particular? Desp de cierta cant de toques? Podrías poner un contador y un if q al llegar a tal cantidad el contador, ejecute el remove
    – Carlos
    Commented el 8 oct. 2022 a las 16:15

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.