vue阻止事件冒泡
by:授客qq：1033553122
win 10
element-ui "2.8.2"
vue 2.9.6
如下圖，當我們點選頁面某個元素時，會產生點選事件，事件由外到內，逐層遞進（事件捕獲階段，途中的1->2->3->4），當目標元素捕捉到目標事件時，會響應事件，並由內到外，逐層往外傳遞(事件冒泡階段，圖中的4->5->6->7)，這便是事件冒泡。正式因為冒泡機制，當使用者點選圖中目標元素div時，5,6,7事件區的元素都會響應點選事件（如果具備響應事件能力的話）
實驗結果如下：
實驗1的基礎上，修改下**，如下，@click ="fun3"改成@click.stop="fun3"
div1
div2
div3
div4
實驗結果：
點選div4，輸出如下：
實驗1的基礎上，修改下**，如下，@click="fun4"改成@click.stop="fun4"
div1
div2
div3
div4
實驗結果：
綜合實驗1,2,3可知，如果想阻止哪個元素的事件冒泡（即事件只針對該元素有效），只要給該元素的事件增加.stop修飾符即可。
如下，點選**中記錄行時，會開啟進入計畫對話方塊，點選「關聯用例」，希望開啟關聯用例對話方塊，但是因為事件冒泡，也會開啟進入計畫對話方塊，這不是我們想要的結果，此時就可以給「關聯用例」按鈕設定@click.stop，這樣就只會開啟關聯用例對話方塊。
除了.stop之外，vue v-on還提供了其它事件修飾符
.once
只響應事件一次，例如@click.once="fun4"，表示僅第一次點選才會執行fun4
這裡， @event等同於v-on:event，vue事件繫結的兩種格式。
.self
僅當事件由元素自身（比如不是子元素）觸發時，才響應事件。例如，上述實驗1的基礎上，修改@click="fun3"為@click.self="fun3",那麼，點選div4所在div時，div3所在div不會**fun3,即不會響應點選事件
.prevent
某些元素(如帶href屬性的超連結元素a)擁有自身的預設事件（事件冒泡結束之後開始執行，並且不受.stop影響）,如果不希望元素響應預設事件，可以給元素事件增加.prevent。常見的遮蔽右鍵預設選單
.passive
每次事件產生，瀏覽器都會去查詢一下是否呼叫了preventdefault阻止該次事件的預設動作,為事件設定.passive修飾符就是為了告訴瀏覽器，不用查詢了，我們沒用preventdefault阻止預設動作。
.capture
表示在「事件捕獲階段」監聽事件，即在事件捕獲階段**事件處理函式。例如，在上述實驗1的基礎上，修改@click="fun3"為@click.capture="fun3",點選div4時，將輸出如下
.native
用於在某個元件的根元素上監聽乙個原生事件。例如:
筆者使用elementui框架時遇到乙個問題，給元件元素新增@click不起作用，如下：
...略
退出登入
解決方法，給事件新增.native修飾符，替換 @click 為 @click.native即可
...略
退出登入
阻止事件冒泡
事件冒泡的概念在此不再重複，下面主要介紹防止事件冒泡的方法 符合w3c標準的event.stoppropagation 和ie瀏覽器下的window.event.cancelbubble true 上述 注釋中標註了阻止事件冒泡的方法，下面是針對兩種方法的封裝 function stopbubble...
阻止事件冒泡
js div li click function e div ul click function e div click function e 說明 1.事件冒泡就是觸發孩子事件時，如果他的父親也有個事件，那麼他執行孩子事件後還會執行父親的事件。2，在孩子節點執行完，return false 這樣就...
阻止事件冒泡
因為我的 ui checkbox new 是頁面新新增的元素，所以在繫結事件的時候，就用on。在在用on繫結事件的時候，這個click事件會觸發兩次。用alert函式測試的時候，1 11 1 11 在網上尋找解決方法 在 中加入return false 阻止冒泡事件後，程式就可以正常執行，不會執行兩...