Vue的阻止冒泡与阻止默认
生活随笔
收集整理的這篇文章主要介紹了
Vue的阻止冒泡与阻止默认
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
方法
1）函數(shù)內(nèi)部阻止事件冒泡 ? e.cancelBubble=true;
2）標(biāo)簽內(nèi)阻止事件冒泡 ? @click.stop=“show1()”
說(shuō)明
1.event.stopPropagation()方法
這是阻止事件的冒泡方法，不讓事件向document上蔓延，但是默認(rèn)事件任然會(huì)執(zhí)行，當(dāng)你掉用這個(gè)方法的時(shí)候，如果點(diǎn)擊一個(gè)連接，這個(gè)連接仍然會(huì)被打開(kāi)，
2.event.preventDefault()方法
這是阻止默認(rèn)事件的方法，調(diào)用此方法是，連接不會(huì)被打開(kāi)，但是會(huì)發(fā)生冒泡，冒泡會(huì)傳遞到上一層的父元素；
3.return false ；
這個(gè)方法比較暴力，他會(huì)同事阻止事件冒泡也會(huì)阻止默認(rèn)事件；寫上此代碼，連接不會(huì)被打開(kāi)，事件也不會(huì)傳遞到上一層的父元素；可以理解為return false就等于同時(shí)調(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() 方法將防止上面的鏈接打開(kāi) URL。</p></div></body><script>new Vue({el: '#app',methods: {btn(event) {// event.preventDefault(); //不會(huì)打開(kāi)event.stopPropagation(); //還是會(huì)打開(kāi)console.log(event.type); //click}}})</script> </html>?
總結(jié)
以上是生活随笔為你收集整理的Vue的阻止冒泡与阻止默认的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 小木屋房山墙外边用什么图案摆造型好看
- 下一篇： Basic各编码每个字符占用字节个数