当我们通过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只会弹出一个对话框，关闭之后不会再产生其他的对话框，