I am facing an issue with two grid children occupying the same cell and both having click event listeners. As per the concept of event bubbling, I expect both event listeners to be triggered when I click on the cell.
const outer = document.getElementById('outer')
outer.addEventListener('click', () => console.log('on outer click'))
const inner1 = document.getElementById('inner1')
inner1.addEventListener('click', () => console.log('on inner1 click'))
const inner2 = document.getElementById('inner2')
inner2.addEventListener('click', () => console.log('on inner2 click'))#outer {
width: 100vw;
height: 100vh;
display: grid;
}
#inner2 {
grid-column: 1/2;
grid-row: 1/2;
}
#inner1 {
grid-column: 1/2;
grid-row: 1/2;
}<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>Playground: https://jsfiddle.net/o10sfpwu/
Expected log:
on inner2 click
on inner1 click
on outer click
Actual log:
on inner2 click
on outer click
Why is the inner1 event listener not fired? Shouldn't the click event bubble through all elements in this space?