vue实现阻止冒泡以及jQuery实现阻止时间冒泡的方法

最新推荐文章于 2024-04-17 01:14:11 发布

小鱼儿游啊~游

最新推荐文章于 2024-04-17 01:14:11 发布

阅读量896

点赞数

分类专栏： elementUI 文章标签： vue 阻止事件冒泡

本文链接：https://blog.csdn.net/gaoxin666/article/details/87722434

版权

elementUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在工作中总是能遇到冒泡事件，总是会影响其他方法的使用，那么下面就简单说说阻止时间冒泡的方法吧！

千言万语不如直接上代码清晰明了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <div @click="click1"　style="width:400px;height: 400px;background-color: red;">　　
        <div @click="click2($even)" style="width:200px;height: 200px;background-color: blue;">
          // vue中直接在@click后面添加stop就可以阻止其冒泡，非常简单方便
            <div @click.stop="click3" style="width:100px;height: 100px;background-color: gold;"></div>
        </div>
    </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: '测试冒泡事件哈'
    },
    methods:{
      click1(){
        console.log('111')
      },
      click2(e){
        console.log('222')
　　　　　// jQuery中使用stopPropagation()方法来解决冒泡问题
        e.stopPropagation()
      },
      click3(){
        console.log('333')
      }
    }
  })
</script>
</body>
</html>

小鱼儿游啊~游

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue实现阻止冒泡以及jQuery实现阻止时间冒泡的方法

在工作中总是能遇到冒泡事件，总是会影响其他方法的使用，那么下面就简单说说阻止时间冒泡的方法吧！千言万语不如直接上代码清晰明了： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue &lt;/title&gt; &lt
复制链接

扫一扫