事件的修饰符
本来应该多加点儿 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