<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
}
.outter{
width: 300px;
height: 300px;
background-color: pink;
}
.center{
width: 180px;
height: 180px;
background-color: skyblue;
}
.inner{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outter">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
// 绑定事件
// 获取到需要用到的元素
var outter = document.querySelector(".outter");
var center = document.querySelector(".center");
var inner = document.querySelector(".inner");
// 给三个元素都绑定点击事件
outter.onclick = function(){
console.log("我是 outer 元素，我被点击了！");
};
center.onclick = function(){
console.log("我是 center 元素，我被点击了！");
};
inner.onclick = function(e){
// 阻止事件
e.stopPropagation();
console.log("我是 inner 元素，我被点击了！");
};
</script>
</body>