码迷,mamicode.com
首页 > 其他好文 > 详细

事件冒泡捕获

时间:2017-06-30 15:41:25      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:com   ges   capture   .com   idt   logs   冒泡   sys   alt   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="traceur.js"></script>
    <script src="BrowserSystem.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue.js"></script>
</head>
<script  type="text/traceur">
window.onload=function(){

    var app3 = new Vue({
      el: #app-3,
      data:{
      },
      
      methods:{
        method1:function(){
            console.log(1);
        },
        method2:function(){
            console.log(2);
        },
        method3:function(){
            console.log(3);
        },
      },
      
      components:{
      },
      
      computed:{
      }
      
    })
    
};

</script>
<style>
    .c1{width:300px;height:300px;background-color:blue;}
    .c2{width:200px;height:200px;background-color:red;}
    .c3{width:100px;height:100px;background-color:gray;}
</style>
<body>
<div id="app-3" >
    <div @click="method1" class="c1">
        1 //点击1弹出1
        <div @click.stop=‘method2‘ class="c2">
            2 //原来点击2弹出21,加了.stop后,点击2弹出2,点击3弹出32,2收到事件后不再冒泡到外层。
            <div @click="method3" class="c3">
                3 //点击3弹出321
            </div>
        </div>
    </div>
    
    <div @click.capture="method1" class="c1">
        11  //
        <div @click.capture=‘method2‘ class="c2">
            22 // 点击2弹出12
            <div @click="method3" class="c3">
                33 // 点击3弹出123
            </div>
        </div>
    </div>
</div>
</body>
</html>

技术分享

事件冒泡捕获

标签:com   ges   capture   .com   idt   logs   冒泡   sys   alt   

原文地址:http://www.cnblogs.com/yaowen/p/7098519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!