一,事件修饰符有哪些
|----------|-------------------------|
| .stop | 阻止事件冒泡 |
| .prevent | 阻止标签的默认行为 |
| .once | 只触发一次,加上once之后prevent失效 |
| .capture | 捕获冒泡 |
| .self | 将事件绑定到自身,只有自身才能触发 |
| .passive | 不阻止事件的默认行为 |
二,如何使用
在方法或者函数后面直接.修饰符就行
比如
html
<button @click.stop=""></button>
三,案例演示
一 stop 用于点击子元素时 阻止父元素的触发
html
<template>
<h3>测试</h3>
<div @click="fu">
<div @click.stop="zi">
<button>提交</button>
</div>
</div>
</template>
<script >
export default{
data(){
return{
msg:0
},
methods,{
}
}
}
</script>
2.prevent 阻止标签的默认行为 将不会跳转到/www.baidu.com页面
html
<a href="https://www.baidu.com" @click.prevent="aClick">百度一下</a>
3.once: 加上once修饰符之后事件只触发一次,但是once不影响事件的冒泡,上层事件仍然会触发,并且加上once的事件prevent会失效
html
<div id="app" @click="divClick">
<div id="aa" @click="aaClick">
<button @click.once="btnClick">按钮</button>
</div>
</div>
4.capture: 优先执行被capture所修饰的方法或者函数
html
<div id="app" @click="divClick">
<div id="aa" @click.capture="aaClick">
<button @click="btnClick">按钮</button>
</div>
</div>
先执行aaClick之后执行btnClick最后执行divClick
5.self: 被点击时 只有自身的方法或者函数被触发 但不影响事件冒泡
html
<div id="app" @click="divClick">
<div id="aa" @click.self="aaClick">
<button @click="btnClick">按钮</button>
</div>
</div>
点击按钮结果就是:执行btnClick和divClick,跳过aaClick;
点击中间层aa结果:执行aaClick和divClick,他也不影响事件冒泡