第二章 Vue快速入门--12 事件修饰符的介绍-优快云博客

本文详细解析Vue中事件修饰符的使用，包括.stop、.prevent、.capture、.self和.once，通过具体代码示例展示了如何阻止事件冒泡、阻止默认行为、实现捕获触发事件机制、仅响应自身点击及限制事件触发次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>