vue綁定的點擊事件阻止冒泡的實例
更新時間：2018年02月08日 09:33:13 作者：LLDD2014425
下面小編就為大家分享一篇vue綁定的點擊事件阻止冒泡的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
當(dāng)我們在使用vue做項目時，經(jīng)常用到點擊事件的綁定，但是我們綁在一個div上，里面的其他按鈕（如刪除、修改）等按鈕也會加載這兒div的點擊事件，而事實我們不需要，如何解決：
首先我們來區(qū)分事件冒泡、事件捕獲是什么
（1）冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順序觸發(fā)。
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結(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>
這個時候在button的點擊事件加上.stop，就可以解決以上問題。
以上這篇vue綁定的點擊事件阻止冒泡的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中倒計時組件的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯
這篇文章主要給大家介紹了關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了詳解vue slot插槽的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇vue自定義正在加載動畫的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了VueCli3中兼容IE11配置的艱苦歷程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下2022-11-11
Vue3+Vue Router實現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持,本文將介紹如何在Vue 3中使用Vue Router實現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
.sync修飾符是Vue中用于實現(xiàn)子組件修改父組件傳遞的props值并更新到父組件的功能,它實際上是一個語法糖,將子組件的props綁定到一個名為update:propName的自定義事件上,本文給大家介紹了vue3中sync修飾符的使用,需要的朋友可以參考下2023-10-10