vue的阻止事件冒泡.stop的使用场景

何处锦绣不灰堆

发布于 2020-05-28 22:55:57

1.1K00

代码可运行

文章被收录于专栏：农历七月廿一农历七月廿一

运行总次数：0

代码可运行

什么是事件冒泡

说人话就是你点击了一个东西，但是同时触发了这个东西所依附的东西，说的比较官方的话就是如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理

有多恶心

举个例子，你在一个span或者一个什么元素上面写了一个事件，这个时候你准备点击这个元素的时候展示给你的女朋友一个好看的画面，然后这个元素上面还有别的按钮，这个时候你希望的是你的对象点击按钮没有任何的反应，只有点击除了这个按钮之外的地方才出现这个好看的页面，结果你没有考虑冒泡事件，写好了，给你的女朋友，就下面演示的这样了！

源码

常规写法

<template>
  <div>
    <common-back :currPage='currPage'>
    </common-back>
    <div class="stopSty" @click="funDiv()">
      <button @click="funBtn1()">button1</button>
      <button @click="funBtn2()">button2</button>
    </div>
  </div>

</template>

<script>

  export default {
    name: "stop",
    data(){
      return {
        currPage: this.$route.params.pageFlag,
      }
    },
    methods: {
      funDiv() {
        console.info("美好的页面")
      },
      funBtn1() {
        console.info("点击了button1")
      },
      funBtn2() {
        console.info("点击了button2")
      }
    }
  }
</script>

<style scoped>
  .stopSty {
    width: 300px;
    height: 300px;
    background: rebeccapurple;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .stopSty button {
    height: 70px;
    width: 140px;
    background: #FFFFFF;
    border: none;
    color: black;
    margin-top: 10px;
  }
</style>

这里点击了button1和button2的时候均触发了美好的页面这个东西，结果惊喜被破坏了，这个时候你的对象要跟你分手，哎，好不容易找到一个对象，丢了 … 什么？为什么我可以有对象，因为我是下面这么写的

阻止冒泡的写法

<template>
  <div>
    <common-back :currPage='currPage'>
    </common-back>
    <div class="stopSty" @click="funDiv()">
      <button @click.stop="funBtn1()">button1</button>
      <button @click.stop="funBtn2()">button2</button>
    </div>
  </div>
</template>

是不是非常的哇塞，这样写就不会出现点击按钮也会触发div事件的情况了！我一直觉得只有demo展示出来才可以直接说明问题所在，我这样想的，也是这样做的，希望可以帮助你们理解！我不喜欢长篇大论的文字，一段代码，一张图，足矣！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

事件

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

事件

登录后参与评论

0 条评论

热度