vue.js中實作阻止事件冒泡

當父子元素中都有點選事件的時候，為了讓觸發子元素中的事件時，不去觸發父元素中的事件，可以在子元素事件中添加stop來阻止事件冒泡。

.stop 是阻止冒泡行為,不讓目前元素的事件繼續往外觸發,如阻止點選div内部事件,觸發div事件

.prevent 是阻止事件本身行為,如阻止超連結的點選跳轉,form表單的點選送出

.self 是隻有是自己觸發的自己才會執行,如果接受到内部的冒泡事件傳遞信号觸發,會忽略掉這個信号

.capture 是改變js預設的事件機制,預設是冒泡,capture功能是将冒泡改為傾聽模式

.once 是将事件設定為隻執行一次,如 .click.prevent.once 代表隻阻止事件的預設行為一次,當第二次觸發的時候事件本身的行為會執行

.passive 滾動事件的預設行為 (即滾動行為) 将會立即觸發，而不會等待 onScroll 完成。這個 .passive 修飾符尤其能夠提升移動端的性能。

阻止click事件冒泡(防止觸發另一個事件)的方法

使用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();      
    },
}      

開源作品

GOFLY是一款基于Golang+Vue開發的線上客服系統，軟體著作權編号：2021SR1462600。一套可私有化部署的線上客服系統，編譯後的二進制檔案可直接使用無需搭開發環境，下載下傳zip解壓即可，僅依賴MySQL資料庫，是一個開箱即用的網頁線上客服系統，緻力于幫助廣大開發者/中小站長快速整合私有客服功能。