vue的事件冒泡

時間 2019-12-13

原文原文鏈接

什麼是事件冒泡？

先說冒泡，咱們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。可是水在上升的過程當中會經歷不一樣的深度的水。
那麼咱們再來解釋一下什麼是事件冒泡，若是屬性瀏覽器原理的同窗就知道，頁面是由文檔流（即dom樹組成的），當咱們在
一個時間觸發的時候，這個事件就像這個氣泡同樣，從dom樹的底層，一層一層的往上面傳遞，一直傳遞到dom的根節點，若是子元素和父級元素觸發的是相同事件的時候，當子元素被觸發的時候父元素也會被觸發冒泡機制，這就是冒泡的基本原理。
css

在不一樣的內核瀏覽器中，冒泡是不同的html

IE<11： div => body => html => document前端

在其餘內核中：div => body =>html => windowvue

注意：在JavaScript中，並不是全部的事件均可以冒泡，像：blur、unload、load等事件就不能冒泡python

示例代碼：
Htmlnpm

<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)

當我點擊子元素時，控制檯打印以下圖：app

當我點擊父元素時：控制檯打印出來以下圖：dom

能夠看到，當我在點擊子元素時，父元素綁定的點擊事件也被觸發了。
那麼咱們如何阻止這種事件傳遞呢？

如何阻止事件冒泡

廢話少說，直接上代碼

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等文章（還有漂亮的小姐姐喲！！！）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。