冒泡和捕获
- 冒泡: 事件从内向外,从下向上执行 (默认行为)
- 捕获: 事件从外向内,从上向下执行
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>