<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.f1{
height:360px;
}
.f2{
height:340px;
}
.f3{
height:320px;
}
.f4{
top:50%;
vertical-align: middle;
padding-top:50px;
height:100px;
}
div{
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="app">
<div @click="log(11)" @click.capture="log(1)" style="background-color:#00f;" class="f1">
<div @click="log(21)" @click.capture="log(2)" style="background-color:#66f;" class="f2">
<div @click.stop="log(31)" @click.capture="log(3)" style="background-color:#ccf;" class="f3">
<a @click="log(41)" @click.capture="log(4)" href="javascript:console.log('x');" style="background-color:#f1f;" class="f4">
点我
</a>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
methods:{
log:function(msg){
console.log(msg);
}
}
})
</script>
</body>
</html>
到达事件源后执行事件源,
解释效果
事件捕获是由外而内的,目标事件是在自身触发的(目标事件过程,与事件声绑定顺序有关,先绑定先发生,它不遵守先捕获后冒泡),事件冒泡是由内而外的。
关键点