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

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

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

<!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>

猜你喜欢

转载自blog.csdn.net/gaoxin666/article/details/87722434