When clicking on a div I want something to happen, but not when clicking on something smaller inside the div, example:
If I have some clickable divs that change size, when I click the input inside, the div still changes size. This addEventListener click is inside a function which is inside a for loop. I tried several ways using this and queryselector and it doesn't work for me.
<!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>
I usually define a global listener and then handle them with an if:
I think that instead of the if you could create a class and use the toggle too