Vue的阻止冒泡与阻止默认
生活随笔
收集整理的這篇文章主要介紹了
Vue的阻止冒泡与阻止默认
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法
1）函數內部阻止事件冒泡 ? e.cancelBubble=true;
2）標簽內阻止事件冒泡 ? @click.stop=“show1()”
說明
1.event.stopPropagation()方法
這是阻止事件的冒泡方法，不讓事件向document上蔓延，但是默認事件任然會執行，當你掉用這個方法的時候，如果點擊一個連接，這個連接仍然會被打開，
2.event.preventDefault()方法
這是阻止默認事件的方法，調用此方法是，連接不會被打開，但是會發生冒泡，冒泡會傳遞到上一層的父元素；
3.return false ；
這個方法比較暴力，他會同事阻止事件冒泡也會阻止默認事件；寫上此代碼，連接不會被打開，事件也不會傳遞到上一層的父元素；可以理解為return false就等于同時調用了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>?
總結
以上是生活随笔為你收集整理的Vue的阻止冒泡与阻止默认的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小木屋房山墙外边用什么图案摆造型好看
- 下一篇： jQuery Vue的CDN