JS如何阻止冒泡事件

1、背景

1.1 什么是事件冒泡

当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。
优点：事件委托可以利用事件冒泡，来达到只指定一个事件处理程序就可以管理某一项类型的所有事件的效果，只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少，整个页面占据的内存空间更少，能够提升整体性能。

1.2 特殊需求

菜单栏的每一项增加一个编辑和删除按钮，因为菜单自带点击事件，在我们点击每个菜单的编辑或删除按钮时候还会去执行一遍菜单执行的操作，这种情况我们就需要阻止编辑和删除按钮的冒泡事件。

2、如何阻止冒泡事件

2.1、vue 如何阻止冒泡事件

使用@click.stop可以阻止冒泡事件

<a-button type="link"   @click.stop="deleteProfessionStation(item)" ><a-icon type="delete" /></a-button>

2.2、js原生如何阻止冒泡事件

<a-button type="link" class="link-btn"  @click="deleteProfessionStation($event,item)"><a-icon type="delete" /></a-button>

    deleteProfessionStation: function( e, professionItem ){
      if(window.event){ 
        // ie 和 谷歌支持阻止冒泡
        window.event.cancelBubble = true; 
      } 
      else{ 
        // 火狐和谷歌支持的阻止冒泡
        e.preventDefault(); 
      } 
   }