jQuery-事件的向上冒泡传递机制

最新推荐文章于 2022-01-05 05:58:51 发布

_洋

最新推荐文章于 2022-01-05 05:58:51 发布

阅读量1k

点赞数 2

文章标签： jquery css3 css

本文链接：https://blog.csdn.net/mantou_riji/article/details/121233139

版权

本文详细介绍了事件冒泡的概念，通过一个三层嵌套的盒子模型实例展示了事件从子元素向父元素传递的过程。讨论了在编程中可能遇到的问题，即不希望点击子元素导致父元素也响应事件的情况，并提出了解决方案——通过阻止事件冒泡来实现。文章最后提供了一个练习，即如何实现点击模态框外部关闭模态而不影响框内的交互。

摘要由CSDN通过智能技术生成

事件的向上冒泡传递机制
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模态框

_洋

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-事件的向上冒泡传递机制

事件的向上冒泡传递机制1.问题引入：现象：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ display: flex; width: 500px; height
复制链接

扫一扫