console
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
var div3 = document.querySelector(".div3");
var div4 = document.querySelector(".div4");
div1.addEventListener("click",(e)=>{console.log("div1")},true);
div2.addEventListener("click",(e)=>{console.log("div2")},false);
div3.addEventListener("click",(e)=>{console.log("div3")},true);
div4.addEventListener("click",(e)=>{console.log("div4")},false);
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.div1, .div2, .div3, .div4{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div1{
width: 400px;
height: 400px;
background-color: #000000;
}
.div2{
width: 300px;
height: 300px;
background-color: #ff0000;
}
.div3{
width: 200px;
height: 200px;
background-color: #ffff00;
}
.div4{
width: 100px;
height: 100px;
background-color: #ffffff;
}