Vue事件修饰符
- stop停止冒泡，不触发父元素
- self只支持本身触发，子元素触发无效
- once只触发一次
- prevent阻止默认事件
- capture捕获事件触发机制,由外到内触发
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件修饰符</title> <style type="text/css"> *{ padding:0px; margin:0px; } .red{ width:150px; height:150px; background-color:red; } .green{ width:100px; height:100px; background-color:green; } .blue{ width:50px; height:50px; background-color:blue; } </style> <script type="text/javascript" src="lib/vue.js"></script> <script type="text/javascript"> window.οnlοad=function(){ var vm=new Vue({ el:"#container", data:{}, methods:{ redClick(){ console.log("red"); }, greenClick(){ console.log("green"); }, blueClick(){ console.log("blue"); }, go(){ console.log("触发a事件") } } }); } </script> </head> <body> <div id="container"> <!-- self只支持本身触发，子元素触发无效 --> <div class="red" @click.self="redClick"> <!-- once只触发一次 --> <div class="green" @click.once="greenClick"> <!-- stop停止冒泡，不触发父元素 --> <div class="blue" @click.stop="blueClick"> </div> </div> </div> <br /> <!-- capture捕获事件触发机制,由外到内触发 --> <div class="red" @click.capture="redClick"> <div class="green" @click="greenClick"> <div class="blue" @click="blueClick"> </div> </div> </div> <!-- prevent阻止默认事件，不会跳转 --> <a class="baidu" @click.prevent="go" href="www.baidu.com">百度</a> </div> </body> </html>
