冒泡和捕获
- 冒泡: 事件从内向外,从下向上执行 (默认行为)
- 捕获: 事件从外向内,从上向下执行
vue之capture 捕获事件
capture.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>capture</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: blue;
}
</style>
</head> <body>
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id1,id2配置了.capture, 所以id1,id2这两个变成了捕获事件, 优先触发,
于是先执行id1,id2捕获, 再执行id4,id3冒泡, 最终按序弹出id1,id2,id4,id3 -->
<div id="app">
<div id="id1" class='pinkBorder' v-on:click.capture="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.capture="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我最终按序弹出id1,id2,id4,id3)
</div>
</div>
</div>
</div> </div> </body>
<script> var app = new Vue({
el: "#app",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之self 自我事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>self</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body> <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.self,检测到不是自身,所以冒泡过程会跳过id2,最终按序弹出id4,id3,id1 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.self="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id1) </div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之stop 阻止事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stop</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body>
<!-- https://cn.vuejs.org/v2/guide/events.html#事件修饰符 -->
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.stop,所以冒泡事件在id2之后终止,最终按序弹出id4,id3,id2 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.stop="doit">
id2 (v-on:click.stop)
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id2 )
</div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>