1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <title>Document</title>
8 <!--1.导入Vue的包-->
9 <!-- <script src="./lib/vue-2.6.10.js"></script> -->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 <style>
12 .inner{
13 height: 150px;
14 background-color: darkcyan;
15 }
16
17 .outer{
18 padding: 40px;
19 background-color: red;
20 }
21 </style>
22
23 </head>
24
25 <body>
26
27 <div id="app">
28 <!-- 使用 .stop 阻止冒泡 -->
29 <!-- <div class="inner" @click="div1Handler">
30 <input type="button" value="戳他" @click.stop="btnHandler">
31 </div> -->
32
33 <!-- 使用 .prevent阻止默认行为 -->
34 <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
35 -->
36
37 <!-- 使用 .capture实现捕获触发事件的机制 -->
38 <!-- <div class="inner" @click.capture="div1Handler">
39 <input type="button" value="戳他" @click.stop="btnHandler">
40 </div> -->
41
42 <!-- 使用.self 实现只要点击当前元素时候，才会触发事件处理函数 -->
43 <!-- <div class="inner" @click.self="div1Handler">
44 <input type="button" value="戳他" @click.stop="btnHandler">
45 </div> -->
46
47 <!-- 使用 .once 只触发一次事件处理函数 -->
48 <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->
49
50
51 <!-- 演示： .stop 和 .self的区别 -->
52 <!-- <div class="outer" @click="div2Handler">
53 <div class="inner" @click="div1Handler">
54 <input type="button" value="戳他" @click.stop="btnHandler">
55 </div>
56 </div> -->
57
58 <!-- .self只会阻止自己身上冒泡行文的触发，并不会真正阻止冒泡的行为 -->
59 <!-- <div class="outer" @click="div2Handler">
60 <div class="inner" @click.self="div1Handler">
61 <input type="button" value="戳他" @click="btnHandler">
62 </div>
63 </div> -->
64
65
66 </div>
67 <script>
68 //创建Vue实例，得到ViewModel
69 var vm = new Vue({
70 el:"#app",
71 data:{},
72 methods:{
73 div1Handler(){
74 console.log('这是触发了 inner div 的点击事件')
75 },
76 btnHandler(){
77 console.log('这是触发了 btn 按钮 的点击事件')
78 },
79 linkClick(){
80 console.log('触发了链接的点击事件')
81 },
82 div2Handler(){
83 console.log('触发了 outer div 的点击事件')
84 }
85 }
86 });
87
88 </script>
89 </body>
90 </html>
