溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了VUE中怎么實現阻止事件冒泡的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VUE中怎么實現阻止事件冒泡文章都會有所收獲，下面我們一起來看看吧。
當父子元素中都有點擊事件的時候，為了讓觸發子元素中的事件時，不去觸發父元素中的事件，可以在子元素事件中添加stop來阻止事件冒泡。
如圖，在button的點擊事件中加上stop，觸發addStatus的時候，就不會去觸發父元素中的showColorStatus事件。
.stop 是阻止冒泡行為,不讓當前元素的事件繼續往外觸發,如阻止點擊div內部事件,觸發div事件
.prevent 是阻止事件本身行為,如阻止超鏈接的點擊跳轉,form表單的點擊提交
.self 是只有是自己觸發的自己才會執行,如果接受到內部的冒泡事件傳遞信號觸發,會忽略掉這個信號
.capture 是改變js默認的事件機制,默認是冒泡,capture功能是將冒泡改為傾聽模式
.once 是將事件設置為只執行一次,如 .click.prevent.once 代表只阻止事件的默認行為一次,當第二次觸發的時候事件本身的行為會執行
.passive 滾動事件的默認行為 (即滾動行為) 將會立即觸發，而不會等待 onScroll 完成。這個 .passive 修飾符尤其能夠提升移動端的性能。
使用vue阻止子級元素的click事件冒泡。簡單得：可以直接用stop
<div @click="test1()"> <span @click.stop="test2()">按鈕1</span> <span>按鈕2</span> </div>
這樣點擊div里面的按鈕1，就不會觸發div綁定時間test1()方法。
可以自己寫個阻止冒泡事件 然后在發生冒泡的元素中調用這個事件
@click="_stopPropagation($event)"
methods：{
_stopPropagation(ev){
var _this = this;
ev.stopPropagation();
},
}關于“VUE中怎么實現阻止事件冒泡”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VUE中怎么實現阻止事件冒泡”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
