Vue事件修饰符:stop、once、selt、prevent、capture
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响,只有直接作用在该元素上的事件才会被调用。
...
<div @click="handler1">
handler1
<div @click="handler2">handler2</div>
</div>
...
handler1() {
console.log('handler1')
}
handler2() {
console.log('handler2')
}
...
点击handler2发生事件冒泡,输出:
handler2
handler1
stop
<div @click="handler1">
handler1
<div @click.stop="handler2">handler2</div>
</div>
添加.stop事件修饰符阻止事件冒泡,输出:
handler2
self
<div @click.self="handler1">
handler1
<div @click="handler2">handler2</div>
</div>
添加.self事件修饰符,只有作用在该元素上的事件起作用,输出:
handler2
once
<div @click="handler1">
handler1
<div @click.once="handler2">handler2</div>
</div>
添加.once事件修饰符,handler2只能触发一次点击事件
第一次点击handler2,输出:
handler2
handler1
第n次点击handler2,输出:
handler1
prevent
<a href="https://www.baidu.com" @click.prevent="other">百度</a>
添加.prevent事件修饰符,阻止默认事件,执行other事件