SOURCE

let a = document.getElementById('a')
let b = document.getElementById('b')
a.addEventListener('click', (e) => {
    e.preventDefault()
    console.log("click a")
})

b.addEventListener('click', (e) => {
    //e.stopPropagation()
    console.log("click b")
})

c.addEventListener('click', (e) => {
    //e.stopPropagation()
    console.log("click c")
})

c.addEventListener('click', (e) => {
    console.log('c catch')
}, true)

a.addEventListener('click', (e) => {
    console.log('a catch')
}, true)

b.addEventListener('click', (e) => {
    e.stopPropagation()
    console.log('b catch')
}, true)

<div class="a" id="a">
    <div class="b" id="b">

    </div>
</div>
<div class="c" id="c">

    </div>

.a {
    background: red;
    width: 100px;
    height: 100px;
}

.b {
    position: absolute;
    left: 200px;
    top: 0;
    background: blue;
    width: 50px;
    height: 50px;
}
.c {
    position: absolute;
    left: 20px;
    top: 0;
    background: yellow;
    width: 50px;
    height: 50px;
}