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