冒泡事件在Vue中的应用

学学学无止境

已于 2022-11-19 13:53:27 修改

阅读量3.6k

点赞数

分类专栏： JavaScript Vue 文章标签： javascript 前端开发语言

于 2022-11-19 13:50:23 首次发布

本文链接：https://blog.csdn.net/weixin_46872121/article/details/127933423

版权

Vue 同时被 2 个专栏收录

55 篇文章 3 订阅

订阅专栏

JavaScript

41 篇文章 0 订阅

订阅专栏

什么是事件冒泡？

一想到“冒泡”这两个词会想到什么？想必然，那就是气泡自下而上的从水底往上生的场景，但是我们也知道，水在往上升的过程中，也会经历不同的高度。由此场景，那么想必然，冒泡的原理就可以很轻易的被理解啦。

我们知道，我们平时缩写的所看到的页面，都是由文档流即DOM树组成的，那么当我们在一个时间出发某个时间的时候，这个事件就会像这个气泡一样，从DOM树的底层，逐步向上传递，一直到DOM的根节点。当然，这事件冒泡的过程中，需要注意的一个点事，只有子元素和父级元素都有绑定了相同的事件，那么触发子组件的事件的时候，才会冒泡到父级组件中，这就是冒泡的基本原理。

不过我们也要清楚一点是，在不同浏览器中，冒泡是不一样的

IE<11：div->body->html->document
其他内核：div>body->html->window

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

示例demo

<template>
  <div class="father" @click="handleClickFather">
    我是父元素
    <div class="son" @click="handleClickSon">我是子元素 </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
    }
  },
  methods: {
    handleClickFather(){
      console.log('点击了father')
    },
    handleClickSon(){
      console.log('点击了son')
    }
  },
}
</script>
<style lang="css">
 .father {
   background:pink;
   height: 200px;
   width: 200px;
   padding: 20px;
   margin: 100px auto;
 }
 .son{
  width: 100px;
  height: 100px;
  background: #fff;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
 }
</style>

点击子元素时候的输出结果：

点击父元素时的输出结果：

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

阻止冒泡事件

原生js中

在W3C中，规定DOM标准通过调用event对象的stopPropagation()方法即可阻止冒泡型事件的进一步传递。

<body>
  <div id="fater">
    我是父元素
    <div id="son">我是子元素</div>
  </div>
  <script>
    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)
  </script>
</body>

Vue中(使用.stop指令)

冒泡事件在Vue中的应用

场景：（类似于百度搜索功能）

实现：

说明：这里一共绑定了三个事件，①是给最外层父级元素绑定close事件，②是给下拉框绑定closeTop事件，③是给下拉框的子项绑定handleClickCompanyItem事件。作用解释如下：

③：点击下拉款子元素之后，关闭记录此次选择的值并关闭下拉框
②：点击下拉框的时候保持下拉框可见
①：点击父元素内所有元素的时候关闭下拉框

由于这里的场景是点击下拉框子项的时候关闭下拉框，点击下拉框的时候保持打开，点击下拉框以外的元素关闭下拉框，所以我这里没有使用.stop来阻止冒泡事件。因此下面的事件就会各司其职。当点击子项的时候，由于父级和祖级的组件都绑定了相同类型的点击事件，因此会不断的向上冒泡，因此是这么一个过程：隐藏->显示->隐藏

冒泡事件在Vue中的应用扩展

假设这里没有点击子项关闭下拉框的需求，那么此时可以去掉子项的handleClickCompanyItem()事件，然后在下拉框事件上加上.stop的指令，这时候就会阻止事件向上冒泡。此时就是点击下拉框元素保持显示，点击除了下拉框意外的元素則會隐藏下拉框，因为已经阻止了事件向上冒泡，自然不会触发祖组件中的close事件。

学学学无止境

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
冒泡事件在Vue中的应用

什么是事件冒泡？一想到“冒泡”这两个词会想到什么？想必然，那就是气泡自下而上的从水底往上生的场景，但是我们也知道，水在往上升的过程中，也会经历不同的高度。由此场景，那么想必然，冒泡的原理就可以很轻易的被理解啦。我们知道，我们平时缩写的所看到的页面，都是由文档流即DOM树组成的，那么当我们在一个时间出发某个时间的时候，这个事件就会像这个气泡一样，从DOM树的底层，逐步向上传递，一直到DOM的根节点。当然，这事件冒泡的过程中，需要注意的一个点事，只有子元素和父级元素都有绑定
复制链接

扫一扫

专栏目录