1、stop阻止冒泡
<style> .outer { width: 500px; height: 300px; background: greenyellow; } .inner { width: 300px; height: 200px; background: hotpink; } .lastInner { width: 150px; height: 100px; background: mediumaquamarine; } </style> <div id="app"> <div class="outer" @click="outer"> <div class="inner" @click.stop="inner"> <div class="lastInner" @click.stop="lastInner"> </div> </div> </div> </div> <script> var vm = new Vue({ el: '#app', data: { }, methods: { outer() { console.log("最外层盒子"); }, inner() { console.log("内层盒子"); }, lastInner() { console.log("最内层盒子"); }, } }) </script>
2、prevent阻止默认事件
<div id="app"> <a href="https://www.baidu.com" target="_blank" @click.prevent="clickA">百度</a> </div> <script> var vm = new Vue({ el: '#app', data: { }, methods: { clickA() { console.log("点击a标签"); } } }) </script>
3、capture添加事件侦听器时使用事件捕获模式
<style> .outer { width: 500px; height: 300px; background: greenyellow; } .inner { width: 300px; height: 200px; background: hotpink; } .lastInner { width: 150px; height: 100px; background: mediumaquamarine; } </style> <div id="app"> <div class="outer" @click.capture="outer"> <div class="inner" @click.capture="inner"> <div class="lastInner" @click="lastInner"> </div> </div> </div> </div> <script> var vm = new Vue({ el: '#app', data: { }, methods: { outer() { console.log("最外层盒子"); }, inner() { console.log("内层盒子"); }, lastInner() { console.log("最内层盒子"); }, } }) </script>
4、self只当事件在该元素本身(比如不是子元素)触发时触发回调
<style> .outer { width: 500px; height: 300px; background: greenyellow; } .inner { width: 300px; height: 200px; background: hotpink; } .lastInner { width: 150px; height: 100px; background: mediumaquamarine; } </style> <div id="app"> <div class="outer" @click.self="outer"> <div class="inner" @click.self="inner"> <div class="lastInner" @click.self="lastInner"> </div> </div> </div> </div> <script> var vm = new Vue({ el: '#app', data: { }, methods: { outer() { console.log("最外层盒子"); }, inner() { console.log("内层盒子"); }, lastInner() { console.log("最内层盒子"); }, } }) </script>
5、once事件只触发一次
<style> .outer { width: 300px; height: 200px; background: mediumpurple; } </style> <div id="app"> <div class="outer" @click.once="onlyOne"> </div> </div> <script> var vm = new Vue({ el: '#app', data: { }, methods: { onlyOne() { console.log("只执行一次"); } } }) </script>