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