事件的向上冒泡传递机制
1.问题引入:
现象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
display: flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
margin: auto;
background-color: lightpink;
}
.box2{
display: flex;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
background-color: powderblue;
}
.box3{
display: flex;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
background-color: #c398ea;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>hello</p>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".box1").click(function (){
$(this).css("background-color","red")
});
$(".box2").click(function (){
$(this).css("background-color","blue")
});
$(".box3").click(function (){
$(this).css("background-color","purple")
});
})
</script>
</body>
</html>
静态页面显示:
我们发现如果从外层一层层点击它会一层层进行变化,如下图所示:
但是如果从里向外进行点击,我们发现,3层一起进行变化
为什么会这样呢?
是否是因为最内层是在外面两层里面,即box3是box1、box2的子元素,所以当点击box3就相当于点击了box1、box2呢?
看起来好像是这个原因。但是如果是这样,就相当于点击子元素就和父元素就业一定会发生相应的变化,使子元素和父元素的变化分不开,这显然不利于我们的编程,所以从这个方面看是错误的。
实际上是因为事件的向上冒泡传递机制造成这样的现象。
我们将在接下来进行介绍。
1.定义:当子元素事件被激活,会影响到父元素监听的事件。 即,当激活子元素点击事件,如果父元素也注册了点击事件,则也会激活父元素的点击事件。这就是事件的向上冒泡传播机制。
2.图示表示:
所以说点击box3,事件就会像父元素传递,父元素一看使=是click事件,自己也有点击事件,就进行了执行,所以一点击box3就全部进行了执行。
同理点击box2,就会触发box1执行,但是box3不会执行。
点击box1,只有box1发生了变化。
(点击的时候就是定位到点击的元素上,不会定位到他的父元素上。
)
3.产生的问题及解决
(1)问题:有的时候我们不希望点击box3,box1、box2都发生,只希望box3发生变化时又该如何实现。
(2)解决:可通过在子元素中阻止事件的冒泡,即在点击box3进行操作时,事件就不会再向box1和box2传递,而是在box3就进行了中断。
如何实现阻止冒泡:监听子元素的事件,当事件发生时执行相应操作,并直接返回假,回调中直接返回false,使父元素无法监听相应事件,即可阻止激活父元素的点击事件。
$(".box3").click(false);
$(".box2").click(false);
这样就可以实现无论从内向外点击还是从内向外点击,都只会一层层变化。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
display: flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
margin: auto;
background-color: lightpink;
}
.box2{
display: flex;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
background-color: powderblue;
}
.box3{
display: flex;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
background-color: #c398ea;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>hello</p>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".box1").click(function (){
$(this).css("background-color","red")
});
$(".box2").click(function (){
$(this).css("background-color","blue")
});
$(".box3").click(function (){
$(this).css("background-color","purple")
});
$(".box3").click(false);
$(".box2").click(false);
})
</script>
</body>
</html>
4.练习:
可以通过该方式实现对弹出框点击空白部分就进行关闭,但是点击框内不进行关闭。
练习题- Modal模态框