目录
事件冒泡
什么是事件冒泡
事件冒泡是一个事件处理机制，在这个机制中，当一个元素上发生事件（比如点击），这个事件不仅在该元素上触发，还会向上通过父元素传播，依次触发每个父元素上的同类型事件，直到到达文档的根部。这个过程就像气泡从水底升到水面一样，因此被称为冒泡。若要阻止事件继续冒泡，可以使用event.stopPropagation()方法。
冒泡事件例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#a{
width: 500px;
height: 500px;
background-color: red;
}
#b{
width: 400px;
height: 400px;
background-color: green;
}
#c{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
$("#a").on("click",function(){
alert('第一')
});
$("#b").on("click",function(){
alert("第二")
});
$("#c").on("click",function(){
alert('第三')
});
</script>
</body>
</html>
在这个代码里面当我点击id为c的标签时，它会弹出三次窗，但是我只要那个它自己的弹窗
冒泡情况如图
对于这钟情况就可以使用event.stopPropagation()方法来解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#a{
width: 500px;
height: 500px;
background-color: red;
}
#b{
width: 400px;
height: 400px;
background-color: green;
}
#c{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
$("#a").on("click",function(){
alert('第一')
});
$("#b").on("click",function(){
alert("第二")
});
$("#c").on("click",function(e){
alert('第三')
e.stopPropagation()//该方法会让事件点击到这里执行这里面的代码，确保不会继续冒泡
});
</script>
</body>
</html>
但是如果我点击id为b的标签它还是会继续冒泡到id为a的标签，因为这个方法只会将冒泡停在它被调用的地方。
标签：width,19,height,2024,color,冒泡,click,事件 From： https://www.cnblogs.com/lzyzjb/p/17979225