什么是事件冒泡？
先說冒泡，我們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。但是水在上升的過程中會經歷不同的深度的水。
那么我們再來解釋一下什么是事件冒泡，如果屬性瀏覽器原理的同學就知道，頁面是由文檔流（即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。