- <!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>
来源: http://www.bubuko.com/infodetail-3152952.html