1.先来看一个有关事件修饰符的表格：
| 名称 | 含义 |
| .stop | 阻止冒泡 |
| .prevent | 阻止默认事件 |
| .capture | 添加事件侦听器时使用事件捕获模式 |
| .self | 只在当事件在该元素本身（比如不是子元素）出发时发生回调 |
| .once | 事件只触发一次 |
2.一个实例
首先来观察一下这个例子，当点击按钮时，会触发哪些事件。
<body>
<div id='app'>
<div class="inner" @click='divHandler()'>
<input type="button" value="btn" @click='btnHandler()'>
</div>
<a href="https://space.bilibili.com/672328094" @click='linkclick'>关注嘉然，顿顿解馋</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
divHandler(){
console.log('hello_1');
},
btnHandler(){
console.log('hello_2');
},
linkclick(){
console.log('点了链接');
}
}
});
</script>
</body>在这串html代码中，点击btn按钮会先触发btnHandler，然后触发divHandler。
3.stop修饰符的作用
上面产生的效果，实际上是一种事件的冒泡处理机制，先处理当前元素的事件，再调用外层被包裹元素的click事件。
那如果不想产生冒泡，这个时候就需要利用到事件修饰符stop。
例：
<input type="button" value="btn" @click.stop='btnHandler()'>4.prevent修饰符的使用
当点击超链接时，会触发linkclick事件。
那么如果只想触发事件而不想让它跳转，就需要使用到prevent修饰符。
例：
<a href="https://space.bilibili.com/672328094" @click.prevent='linkclick'>关注嘉然，顿顿解馋</a>除了超链接的跳转可以阻止，表单的提交也可以用prevent阻止。
5.capture修饰符的使用
当点击上面的btn按钮时，如果我们想先触发divHandler事件，再触发btnHandler，就可以用capture将事件冒泡机制改为捕获机制。
<div class="inner" @click.capture='divHandler()'>
<input type="button" value="btn" @click='btnHandler()'>
</div>这个时候再点击按钮，就会从外到内执行事件。
6.self修饰符的使用
点击按钮时，div的点击事件并不是它自己触发的，而是通过冒泡被动触发的。如果想实现只有点击div时，才执行div的事件就可以用self。
<div class="inner" @click.self='divHandler()'>
<input type="button" value="btn" @click='btnHandler()'>
</div>7.once修饰符的使用
由于事件修饰符是可以串联的，以上面的a标签为例，在prevent后边加上.once，则只会触发一次阻止跳转的行为，第二次点击时就不会阻止了。
<a href="https://space.bilibili.com/672328094" @click.prevent.once='linkclick'>关注嘉然，顿顿解馋</a>注： stop会阻止所有的冒泡，而self只会阻止自己身上冒泡行为的触发，并不会真正阻止旨泡的行为。
扫一扫
2719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
