亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例

 更新時(shí)間：2018年02月08日 09:33:13   作者：LLDD2014425  
下面小編就為大家分享一篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

當(dāng)我們在使用vue做項(xiàng)目時(shí)，經(jīng)常用到點(diǎn)擊事件的綁定，但是我們綁在一個(gè)div上，里面的其他按鈕（如刪除、修改）等按鈕也會(huì)加載這兒div的點(diǎn)擊事件，而事實(shí)我們不需要，如何解決：

首先我們來區(qū)分事件冒泡、事件捕獲是什么

（1）冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。

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

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

（2）捕獲型事件(event capturing)：事件從最不精確的對(duì)象(document 對(duì)象)開始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過必須由開發(fā)人員特別指定)。

（3）DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象，從document對(duì)象開始，也在document對(duì)象結(jié)束。

<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}"> 
   <ul> 
    <li><span><label :class="{labelChange:items.changeBack}">√</label></span><label v-html="items.name"></label> </li> 
    <li><label v-html="items.sex"></label></li> 
    <li><label v-html="items.tel"></label></li> 
    <li> 
     <label v-html="items.age" v-if="items.age<=20" v-bind:class="'black'"></label> 
     <label v-html="items.age" v-else-if="items.age<=40" v-bind:class="'green'"></label> 
     <label v-html="items.age" v-else-if="items.age<=60" v-bind:class="'blue'"></label> 
     <label v-html="items.age" v-else-if="items.age<=80" v-bind:class="'purple'"></label> 
     <label v-html="items.age" v-else v-bind:class="'red'"></label> 
    </li> 
    <li><label v-html="items.profession"></label></li> 
    <li><button v-on:click.stop="deleteThis(index)">刪除</button></li> 
   </ul> 
  </div></span>

這個(gè)時(shí)候在button的點(diǎn)擊事件加上.stop，就可以解決以上問題。

以上這篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論