<!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>
时间： 2024-10-17 23:04:52