事件冒泡

　　当我们通过jQuery或者是js为某个元素绑定了一个事件或者添加了一个事件监听之后，通过特定的行为会触发该事件，然后执行相应的事件处理函数，但是函数执行之后，事件并没有结束，而会向他的外层元素冒泡，直到最外层元素，这就是事件冒泡，事件捕获与事件冒泡相反，是从最外层元素向里。

　　可能描述的不是很清楚，下面用一段代码来解释事件冒泡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        div {
            border:1px solid #ccc;
            margin:10px auto;
        }
        .d1 {
            width: 300px;
            height: 300px;
        }

        .d2 {
            width: 200px;
            height: 200px;
        }
        .div3 {
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <div class="div3">this is div3</div>
        </div>
    </div>
</body>
<script>
   $(function () {
       $(".d1").click(function(){
           alert("thi is d1");
       });
       $(".d2").click(function(){
           alert("this is d2");
       });
       $(".div3").click(function(){
           alert("this is div3");
       });
   })
</script>
</html>

 

　　首先定义了三个div，这里通过jQuery为三个div都加上了click鼠标点击事件，这段代码的目的是当点击其中的一个div标签时，会弹出相应的内容，当点击div3时，会显示this is div3

这是我们希望看到的结果，但是事实证明，当我们关闭了这个对话框之后还会弹出另外两个对话框

我只点击了div3，但是外层的两个div的click事件都触发了，这是因为click事件在向上传递，作为父亲和爷爷的div2和div1也会收到该事件，并触发自己的事件处理函数，这就是所谓的事件冒泡。

那么我们知道了什么是事件冒泡，该怎么阻止它呢，最简单的方法就是通过event对象的stopPropagation()，该方法会在指定的位置来阻止事件继续向上冒泡。

 $(".div3").click(function(){
           alert("this is div3");
           event.stopPropagation()
       });

我们在div3中插入了一行代码，调用了event的stopPropagation方法，再次执行时，点击div3只会弹出一个对话框，关闭之后不会再产生其他的对话框，

　　

 

posted on 2017-07-31 00:29  观琪不喻  阅读(119)  评论(0)  编辑  收藏  举报

导航