JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box">
    <div id="test"></div>
</div>

CSS

#box {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#test {
    width: 50%;
    height: 50%;
    position: absolute;
    border: 1px solid red;
}

JavaScript

document.querySelector('#box').addEventListener('click',function(e){
	alert(1)
})
document.querySelector('#test').addEventListener('click',function(e){
	e.stopPropagation()
})

document.addEventListener('click',function(){
	
})