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>
event.currentTarget
ó que simplemente aplique una class css y ahi filtras que elementos se modifican.