事件冒泡捕获

红太狼 2021-03-22 12:49 677阅读 0赞

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

![486468-20170630135831352-1427052854.jpg][]

[486468-20170630135831352-1427052854.jpg]: /images/20210322/1616417386968.jpg