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>
原文地址:https://www.cnblogs.com/songsongblue/p/10987230.html
时间: 2024-11-01 15:08:05