vue .stop .self .capture .prevent 阻止冒泡
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> </head> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> <body> <div id="app"> <div style='width: 100%;height: 200px;background: #aaa888' @click='background'> <!-- 防止冒泡 --> <input type="button" value="点我" @click.stop='val'> <!-- 阻止默认行为 --> <a href="http://www.baidu.com" @click.prevent.stop='linkclick'>阻止默认行为</a> <!-- 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。 --> <input type="button" value="点我2" @click.capture='val'> </div> <!-- 只阻止自己如果父级也冒泡则不会阻止 --> <div style='width: 100%;height: 200px;background: #aaa888' @click.self='background'> <!-- 防止冒泡 --> <input type="button" value="点我" @click='val'> </div> <!-- 只阻止一次 --> <a href="http://www.baidu.com" @click.once.prevent='linkclick'>阻止默认行为</a> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ }, methods:{ background:function(){ console.log('触发背景色') }, val:function(){ console.log('触发按钮') }, linkclick:function(){ console.log('阻止默认行为') } } }) </script> </body> </html>