VUE中如何實現阻止事件冒泡

Posted on by

如何阻止事件冒泡

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

如圖，在button的點擊事件中加上stop，觸發addStatus的時候，就不會去觸發父元素中的showColorStatus事件。

科普

  • .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();      
    },
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：