詳解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之徹底理解自定義組件的v-model的相關(guān)知識 ,需要的朋友可以參考下的相關(guān)資料2017-11-11
本文主要介紹了vue實現(xiàn)input輸入模糊查詢的三種方式嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式
這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue ESLint是一個基于ESLint的插件,它專門為Vue.js應(yīng)用設(shè)計,用于提供JavaScript代碼風(fēng)格檢查和最佳實踐規(guī)則,Vue項目通常會集成ESLint,目的是為了提升代碼質(zhì)量、保持一致性和可維護(hù)性,本文介紹了Vue項目中禁用ESLint的幾種常見方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過實例代碼案例分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue 實現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue--keep-alive使用實例詳解,keep-alive標(biāo)簽主要用于保留組件狀態(tài)或避免重新渲染，用示例代碼介紹Vue的keep-alive的用法，需要的朋友可以參考下2022-08-08