阻止 事件冒泡 的三个方法：
1.event.stopPropagation()方法
阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
3.return false ；
这个就比较粗暴，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用event.stopPropagation()和event.preventDefault()
实例演示，使用jquery操作demo：
html代码，div里面还放了一个div,实现点击效果：
<div class="aa">
<div class="bb"></div>
</div>css代码，里面div占外div的50%空间，大的div背景色设置了透明度：
*{
margin: 0 auto;
padding: 0;
}
html ,body{
width: 100%;
height: 100%;
background-image: url("../测试案例/img/202106021648330155181.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.aa{
width: 100%;
height: 100%;
background-color: #12131342;
}
.bb{
z-index: 99;
float: left;
width: 50%;
height: 100%;
background-color: #a87396;
}效果图如下,图片为背景照：
下面js代码，
第一种：
$(".aa").click(function(){
alert("我是大盒子")
})
$(".bb").click(function(){
event.stopPropagation()
alert("我是里面一个div")
})点击紫色区域，就是里面的div，只会出发它的点击事件，同样透明度区域也只会出发他所领域的空间的事件。
第二种：
$(".aa").click(function(){
alert("我是大盒子")
})
$(".bb").click(function(){
event.preventDefault()
alert("我是里面一个div")
})点击紫色区域，里面div的同时 也会触发到外面的div盒子，会有两次弹窗，当然点击透明快，只会出发外面div的点击事件。
第三种：
$(".aa").click(function(){
return false;
alert("我是大盒子")
})
$(".bb").click(function(){
return false;
alert("我是里面一个div")
})两个事件都不会被触发！