默认情况下,js的事件会向上冒泡,如:以下三个div
元素:
<div class="grandfather" @click="catchGrandfather"> <div class="father" @click="catchFather"> <div class="son" @click="catchSon"></div> </div> </div>
当我们点击里层的div,会触发外层的div事件
let vm = new Vue({ el: "#app", data: { }, methods: { catchSon() { console.log('我还小,别抓我啊...'); }, catchFather() { console.log('我上有老,下有小,各位官爷,手下留情啊...'); }, catchGrandfather() { console.log('你们这些兔崽子,敢动我这把老骨头试下!'); } } })
冒泡.gif
vue提供了事件修饰符,可以修改默认的事件触发机制:
以 .stop
为例:
<div class="grandfather" @click="catchGrandfather"> <div class="father" @click="catchFather"> <!-- 阻止此元素向上冒泡 --> <div class="son" @click.stop="catchSon"></div> </div> </div>
阻止冒泡.gif
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句