什么是事件冒泡？
先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。
那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（即dom树组成的），当我们在
一个时间触发的时候，这个事件就像这个气泡一样，从dom树的底层，一层一层的往上面传递，一直传递到dom的根节点，如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理。
在不同的内核浏览器中，冒泡是不一样的
IE<11： div => body => html => document
在其他内核中：div => body =>html => window
注意：在JavaScript中，并非所有的事件都可以冒泡，像：blur、unload、load等事件就不能冒泡
示例代码：
Html
<div id="app"> <div id="father"> <div id="child"> 我是子元素 </div> 我是父级元素 </div> </div>css
#app{ width: 500px; height: 500px; margin: 200px auto; background-color: #f5f5f5; border:2px solid #dddddd; } #father{ width: 400px; height: 400px; background-color: rgb(168, 125, 125); text-align: center; color:red; } #child{ width: 200px; height: 200px; background-color: #fff; color:blue; }js
var father = document.getElementById('father');var child = document.getElementById('child');father.addEventListener("click", function () { console.log('我是父级元素')}, false)child.addEventListener("click", function () { console.log('我是子集元素')}, false)当我点击子元素时，控制台打印如下图：
当我点击父元素时：控制台打印出来如下图：
可以看到，当我在点击子元素时，父元素绑定的点击事件也被触发了。
那么我们如何阻止这种事件传递呢？
如何阻止事件冒泡
废话少说，直接上代码
js
var father = document.getElementById('father');var child = document.getElementById('child');father.addEventListener("click", function () { if(event && event.stopPropagation){ event.stopPropagation() // 非IE浏览器 }else{ event.cancelBubble = true; //IE浏览器 } console.log('我是父级元素')}, false)child.addEventListener("click", function () { if (event && event.stopPropagation) { event.stopPropagation() // 非IE浏览器 } else { event.cancelBubble = true; //IE浏览器 } console.log('我是子集元素')}, false)在W3C中，规定DOM标准通过调用event对象的stopPropagation()方法即可阻止冒泡型事件的进一步传递。
那么在vue中我们如何使用呢？
我们可以用.stop修饰符绑定在子元素上面，阻止其向父元素冒泡，从而达到不会触发冒泡事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style> #app{ width: 500px; height: 500px; margin: 200px auto; background-color: #f5f5f5; border:2px solid #dddddd; } .father{ width: 400px; height: 400px; background-color: rgb(168, 125, 125); text-align: center; color:red; } .child{ width: 200px; height: 200px; background-color: #fff; color:blue; }</style><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body><div id="app"> <div class="father" @click="clickFather"> <div class="child" @click.stop="clickChild"> 我是子元素 </div> 我是父级元素 </div></div><script>var app = new Vue({ el:"#app", data:{ }, methods:{ clickFather(){ console.log('我是父级元素') }, clickChild(){ console.log('我是子元素') } }})</script></body></html>点击子元素打印出来日志
：
当然，事件冒泡是浏览器的默认行为，之所以这样设计，是有原因的，因为有时候事件冒泡可以提供很多的便利，但是使用不当就会造成很多不必要的bug。
总结：1.事件冒泡的基本原理
2.原生js和vue中分别如何阻止事件冒泡 本文首发微信公众号：码客小栈
欢迎扫描二维码关注公众号，小码不定时的分享工作中的问题和前端、python等文章 （还有漂亮的小姐姐哟！！！）。