<div style="height: 150px;background-color: aqua" @click="divClick">
<input type="button" value="点我" @click="btnClick">
</div>
btnClick divClick 都会调用 因为冒泡机制 先执行btnClick后执行divClick
<div style="height: 150px;background-color: aqua" @click="divClick">
<input type="button" value="点我" @click.stop="btnClick">
</div>
只会调用btnClick 方法 因为.stop阻止了冒泡
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
.prevent可以阻止默认的事件 只调用linkClick事件 不跳转链接
<div style="height: 150px;background-color: aqua" @click.capture="divClick">
<input type="button" value="点我" @click="btnClick">
</div>
.capture 捕获事件 先调用父类方法divClick 再去执行btnClick
<div style="height: 150px;background-color: aqua" @click.self="divClick">
<input type="button" value="点我" @click="btnClick">
</div>
.self 只有点击自己才会执行divClick事件 冒泡 捕获到它的都不行 但是冒泡 捕获只阻止自己的 不会阻止他父类的冒泡 捕获
.stop阻止了冒泡 是自己以及他的父类的
<div style="height: 150px;background-color: aqua" @click.self="divClick">
<input type="button" value="点我" @click.once="btnClick">
</div>
网友评论