乐趣区

vue的事件冒泡

什么是事件冒泡?

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。
那么我们再来解释一下什么是事件冒泡,如果属性浏览器原理的同学就知道,页面是由文档流(即 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 等文章(还有漂亮的小姐姐哟!!!)。

退出移动版