Vue,事件的修饰符

事件的修饰符

本来应该多加点儿 F12 的控制台效果图更方便理解，不过没有时间，代码也能看明白，一点都有，F12直接都能出了
简单总结一下：
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获触发事件的机制
.self 实现只有点击当前元素的时候，才会触发事件处理函数
.once 只触发一次件处理函数
事件可以串联连用，嗯，暂时就这些了
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6     </head>
  7     <script src="../js/vue.js"></script>
  8     <style>
  9         .inner {
 10             height: 20px;
 11             background-color: pink;
 12         }
 13         
 14         .outer{
 15             padding: 30px;
 16             background: #FF0000;
 17         }
 18     </style>
 19     <body>
 20         <div id="app">
 21             
 22             <!-- 使用  .stop  阻止冒泡  -->
 23             <!-- 不用  .stop的话， 点击 戳他按钮 会同时触发 innerHandler 和 btnHandler， 添加后点击按钮 只触发btnHandler
 24             不会触发整个div 块-->
 25             <div class="inner" @click="innerHandler">
 26                 <input type="button" value="戳他" @click.stop="btnHandler">
 27             </div>
 28             
 29             <br>
 30             
 31             <!-- 使用  prevent  阻止默认行为 -->
 32             <a href="https://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
 33             
 34             <br><br>
 35             
 36             
 37             <!-- 使用  .capture  实现捕获触发事件的机制 -->
 38             <!-- 此时点击 戳他按钮 div 事件比按钮事件同时触发，不过先触发 div事件 -->
 39             <div class="inner" @click.capture="innerHandler1">
 40                 <input type="button" value="戳他" @click="btnHandler1">
 41             </div>
 42             
 43             <br>
 44             
 45             <!-- 使用  .self 实现只有点击当前元素的时候， 才会触发事件处理函数 -->
 46             <div class="inner" @click.self="innerHandler2">
 47                 <input type="button" value="戳他" @click="btnHandler2">
 48             </div>
 49             
 50             <br>
 51             <!-- 使用  .once  只触发一次件处理函数 -->
 52             <!-- 原本不加 .once时， 无论点击多少次都不会触发超链接（因为添加了.prevent 阻止默认行为） 
 53             现在添加了 .once 就只能阻止一次， 点击第二次时可以跳转到百度页面-->
 54             <a href="https://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
 55             
 56             <br><br>
 57             
 58             <!-- 演示:  .stop 和  .self 的区别 -->
 59             <!-- .stop 阻止了 outer 和 inner 的冒泡行为 -->
 60             <!-- <div class="outer" @click="qubie">
 61                 <div class="inner" @click="innerHandler">
 62                     <input type="button" value="戳他" @click.stop="btnHandler">
 63                 </div>
 64             </div> --> 
 65             
 66             <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
 67             <!-- 点击按钮时不会触发 innerHandler， 但是会正常触发 qubie -->
 68             <div class="outer" @click="qubie">
 69                 <div class="inner" @click.self="innerHandler">
 70                     <input type="button" value="戳他" @click="btnHandler">
 71                 </div>
 72             </div>
 73             
 74         </div>
 75     </body>
 76 </html>
 77 <script>
 78     var vm = new Vue({
 79         el: '#app',
 80         data:{
 81             
 82         },
 83         methods:{
 84             innerHandler(){
 85                 console.log("这是触发了 innerHandler div 事件")
 86             },
 87             btnHandler(){
 88                 console.log("这是触发了 btnHandler 按钮 事件")    
 89             },
 90             linkClick(){
 91                 console.log("这是触发了 linkClick 超链接 事件")
 92             },
 93             innerHandler1(){
 94                 console.log("这是触发了 innerHandler1 div 事件")
 95             },
 96             btnHandler1(){
 97                 console.log("这是触发了 btnHandler1 按钮 事件")    
 98             },
 99             innerHandler2(){
100                 console.log("这是触发了 innerHandler2 div 事件")
101             },
102             btnHandler2(){
103                 console.log("这是触发了 btnHandler2 按钮 事件")    
104             },            
105             qubie(){
106                 console.log("这是触发了 outer div 事件")
107             }
108         }
109     })
110 </script>
2019-06-11 15:58:30