vue的事件冒泡

Youngs 发布于2019-08-23 18:04 / 1481人阅读

摘要：什么是事件冒泡先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。

什么是事件冒泡？

先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。
那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（即dom树组成的），当我们在
一个时间触发的时候，这个事件就像这个气泡一样，从dom树的底层，一层一层的往上面传递，一直传递到dom的根节点，如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理。

在不同的内核浏览器中，冒泡是不一样的

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

在其他内核中：div => body =>html => window

注意：在JavaScript中，并非所有的事件都可以冒泡，像：blur、unload、load等事件就不能冒泡

示例代码：
Html

css

#app{
 width: 500px;
 height: 500px;
 margin: 200px auto;
 background-color: #f5f5f5;
 border:2px solid #ffffdffffd;
 }
 #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;
 }

  var father = document.getElementById("father");
var child = document.getElementById("child");
father.addEventListener("click", function () {
    console.log("我是父级元素")
}, false)
child.addEventListener("click", function () {
    console.log("我是子集元素")
}, false)

当我点击子元素时，控制台打印如下图：

当我点击父元素时：控制台打印出来如下图：

可以看到，当我在点击子元素时，父元素绑定的点击事件也被触发了。
那么我们如何阻止这种事件传递呢？

如何阻止事件冒泡

废话少说，直接上代码

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修饰符绑定在子元素上面，阻止其向父元素冒泡，从而达到不会触发冒泡事件




    
    
    
    Document





    
        
            我是子元素
        
        我是父级元素

点击子元素打印出来日志

：

当然，事件冒泡是浏览器的默认行为，之所以这样设计，是有原因的，因为有时候事件冒泡可以提供很多的便利，但是使用不当就会造成很多不必要的bug。

总结：1.事件冒泡的基本原理

 2.原生js和vue中分别如何阻止事件冒泡

本文首发微信公众号：码客小栈
欢迎扫描二维码关注公众号，小码不定时的分享工作中的问题和前端、python等文章（还有漂亮的小姐姐哟！！！）。

云服务器 GPU云服务器冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104622.html

重新认识vue之事件阻止冒泡

摘要：通用解决办法事件冒泡了嘛，那就阻止事件冒泡呗。很完美有没有，这就不用在事件响应逻辑中去处理事件细节了。冒泡的表现近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示: showImg(https://segmentfault.com/img/remote/1460000015852878?w=1962&h=392); 他们的...

marek 2019-08-23 10:37 评论0 收藏0
浅谈---事件冒泡--事件捕获--Vue2.0中的capture

摘要：直白点事件触发顺序子元素父元素事件冒泡和事件捕获图解标准事件监听标准事件监听其实是事件冒泡和事件捕获的混合体任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达。前言本文主要介绍事件冒泡和事件捕获以及Vue中的capture 主要内容事件捕获含义:从最特定的事件目标到最不特定的事件目标(document对象...

Raaabbit 2019-08-20 17:07 评论0 收藏0
vue1.x 事件对象（二）

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。...

Enlightenment 2019-08-21 12:04 评论0 收藏0
vue1.x 事件对象（二）

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。...

JasinYip 2019-08-01 17:27 评论0 收藏0