I have a parent element with several child elements, some of which have their own listeners and others don’t. The parent element has click handler that I want to run only if I click on the parent itself and not any of the child elements.
document.getElementById('parent').addEventListener('click', ()=> console.log('parent clicked'))
document.getElementById('child2').addEventListener('click', ()=> console.log('child2 clicked'))#parent {
height: 300px;
width: 300px;
background-color: Lightgreen;
wrap: true;
display: flex;
flex-direction:column;
gap: 20px;
padding: 50px 50px;
}
#parent * {
height: 100px;
width: 100px;
background-color: white;
text-align: center;
display: grid;
place-items: center;
}<div id="parent"> parent -Only log 'parent' when green background is clicked and nothing else-
<div id="child1">child1 <br> -Nothing should happen when clicked-</div>
<div id="child2">child2 <br> -Should only log -child 2 if clicked-</div>
</div>I tried stopPropagation() but it works to stop handlers from firing when bubbling up, so I’d need to add it to all child event handlers, and I still can’t stop the parent from firing when clicking on objects without event listeners.
Is there a way to restrict the parent handler only when clicking on the element itself?