詳解Vue 事件修飾符capture 的使用
更新時間：2017年12月29日 10:00:10 作者：有一個王小森
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧
.capture事件修飾符的作用添加事件偵聽器時使用事件捕獲模式
即是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。若有多個該修飾符，則由外而內(nèi)觸發(fā)。
就是誰有該事件修飾符，就先觸發(fā)誰。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.capture事件修飾符</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="content">
<div id="obj1" v-on:click.capture="doc">
obj1
<div id="obj2" v-on:click.capture="doc">
obj2
<div id="obj3" v-on:click="doc">
obj3
<div id="obj4" v-on:click="doc">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。點擊obj4的時候，彈出的順序為：obj1、obj2、obj4、obj3；
由于1，2有修飾符，故而先觸發(fā)事件，然后就是4本身觸發(fā)，最后冒泡事件。
-->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
})
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue 事件修飾符capture 的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+iview+less+echarts實戰(zhàn)項目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置及注釋的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue-cli項目中img如何使用require動態(tài)獲取圖片
這篇文章主要介紹了vue-cli項目中img如何使用require動態(tài)獲取圖片，具有很好的參考價值，希望對大家有所幫助。2022-09-09
解決vue的 v-for 循環(huán)中圖片加載路徑問題
今天小編就為大家分享一篇解決vue的 v-for 循環(huán)中圖片加載路徑問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue封裝組件利器之$attrs、$listeners的使用
vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文2018-01-01
Vue3集成json-editor-vue3的代碼實現(xiàn)
這篇文章主要介紹了Vue3集成json-editor-vue3的代碼實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11