您好,登錄后才能下訂單哦!
當(dāng)我們?cè)谑褂胿ue做項(xiàng)目時(shí),經(jīng)常用到點(diǎn)擊事件的綁定,但是我們綁在一個(gè)div上,里面的其他按鈕(如刪除、修改)等按鈕也會(huì)加載這兒div的點(diǎn)擊事件,而事實(shí)我們不需要,如何解決:
首先我們來(lái)區(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ì)象)開(kāi)始觸發(fā),然后到最精確(也可以在窗口級(jí)別捕獲事件,不過(guò)必須由開(kāi)發(fā)人員特別指定)。
(3)DOM事件流:同時(shí)支持兩種事件模型:捕獲型事件和冒泡型事件,但是,捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象,從document對(duì)象開(kāi)始,也在document對(duì)象結(jié)束。
<span > <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,就可以解決以上問(wèn)題。
以上這篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。