vue綁定的點擊事件阻止冒泡

當咱們在使用vue作項目時,常常用到點擊事件的綁定,可是咱們綁在一個div上,裏面的其餘按鈕(如刪除、修改)等按鈕也會加載這兒div的點擊事件,而事實咱們不須要,如何解決:html

首先咱們來區分事件冒泡、事件捕獲是什麼vue


(1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。ide

  IE 6.0: div -> body -> html -> documenturl

  Mozilla 1.0: div -> body -> html -> document -> windowspa

(2)捕獲型事件(event capturing):事件從最不精確的對象(document 對象)開始觸發,而後到最精確(也能夠在窗口級別捕獲事件,不過必須由開發人員特別指定)。.net

(3)DOM事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件,可是,捕獲型事件先發生。兩種事件流會觸及DOM中的全部對象,從document對象開始,也在document對象結束。orm

[html] view plain copyxml

  1. <span style="font-family:SimSun;font-size:14px;">        <div class="tableContent" v-for="(items,index) in dataList" v-on:click="changeBacks(items)" :class="{tableContentHover:items.changeBack}">  htm

  2.             <ul>  對象

  3.                 <li><span><label :class="{labelChange:items.changeBack}"></label></span><label v-html="items.name"></label> </li>  

  4.                 <li><label v-html="items.sex"></label></li>  

  5.                 <li><label v-html="items.tel"></label></li>  

  6.                 <li>  

  7.                     <label v-html="items.age" v-if="items.age<=20" v-bind:class="'black'"></label>  

  8.                     <label v-html="items.age" v-else-if="items.age<=40" v-bind:class="'green'"></label>  

  9.                     <label v-html="items.age" v-else-if="items.age<=60" v-bind:class="'blue'"></label>  

  10.                     <label v-html="items.age" v-else-if="items.age<=80" v-bind:class="'purple'"></label>  

  11.                     <label v-html="items.age" v-else v-bind:class="'red'"></label>  

  12.                 </li>  

  13.                 <li><label v-html="items.profession"></label></li>  

  14.                 <li><button v-on:click.stop="deleteThis(index)">刪除</button></li>  

  15.             </ul>  

  16.         </div></span>  


這個時候在button的點擊事件加上.stop,就能夠解決以上問題


原地址:https://blog.csdn.net/lldd2014425/article/details/59110546

相關文章
相關標籤/搜索