Vue的阻止冒泡与阻止默认
生活随笔
收集整理的這篇文章主要介紹了
Vue的阻止冒泡与阻止默认
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
方法
1）函數(shù)內(nèi)部阻止事件冒泡 ? e.cancelBubble=true;
2）標(biāo)簽內(nèi)阻止事件冒泡 ? @click.stop=“show1()”
說明
1.event.stopPropagation()方法
這是阻止事件的冒泡方法，不讓事件向document上蔓延，但是默認(rèn)事件任然會執(zhí)行，當(dāng)你掉用這個方法的時候，如果點擊一個連接，這個連接仍然會被打開，
2.event.preventDefault()方法
這是阻止默認(rèn)事件的方法，調(diào)用此方法是，連接不會被打開，但是會發(fā)生冒泡，冒泡會傳遞到上一層的父元素；
3.return false ；
這個方法比較暴力，他會同事阻止事件冒泡也會阻止默認(rèn)事件；寫上此代碼，連接不會被打開，事件也不會傳遞到上一層的父元素；可以理解為return false就等于同時調(diào)用了event.stopPropagation()和event.preventDefault()
代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a><p>preventDefault() 方法將防止上面的鏈接打開 URL。</p></div></body><script>new Vue({el: '#app',methods: {btn(event) {// event.preventDefault(); //不會打開event.stopPropagation(); //還是會打開console.log(event.type); //click}}})</script> </html>?
總結(jié)
以上是生活随笔為你收集整理的Vue的阻止冒泡与阻止默认的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小木屋房山墙外边用什么图案摆造型好看
- 下一篇： html5倒计时秒杀怎么做,vue 设