當我們在使用vue做項目時，經常用到點擊事件的綁定，但是我們綁在一個div上，里面的其他按鈕（如刪除、修改）等按鈕也會加載這兒div的點擊事件，而事實我們不需要，如何解決：
首先我們來區分事件冒泡、事件捕獲是什么
（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。
<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>
這個時候在button的點擊事件加上.stop，就可以解決以上問題。
以上這篇vue綁定的點擊事件阻止冒泡的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
