Vue事件捕獲方式(capture修飾符)
一、先理解 DOM 事件的 “傳播三階段”
當(dāng)你點(diǎn)擊一個(gè)按鈕，瀏覽器處理事件分 3 步（像 “快遞送貨”，有固定流程）：
| 階段 | 行為描述 | 類比場(chǎng)景 |
|---|---|---|
| 捕獲階段 | 事件從 document 出發(fā)，由外到內(nèi)找目標(biāo)（父元素 → 子元素） | 快遞從省會(huì) → 市 → 區(qū) → 小區(qū) |
| 目標(biāo)階段 | 找到目標(biāo)元素（比如按鈕自己），執(zhí)行事件 | 快遞送到你家門口 |
| 冒泡階段 | 事件從目標(biāo)元素出發(fā)，由內(nèi)到外向上傳播（子元素 → 父元素 → 更外層父元素） | 你取到快遞后，消息從家 → 小區(qū) → 區(qū) → 市 |
二、默認(rèn)情況：事件在 “冒泡階段” 觸發(fā)
Vue 里寫 @click="xxx"，默認(rèn)監(jiān)聽(tīng)的是 冒泡階段 的事件。
示例（無(wú) capture 修飾符）：
<div class="parent" @click="parentClick"> 父元素 <button class="child" @click="childClick">子元素（按鈕）</button> </div>
methods: {
parentClick() { console.log('父元素（冒泡階段）觸發(fā)'); },
childClick() { console.log('子元素（冒泡階段）觸發(fā)'); }
}執(zhí)行順序（點(diǎn)擊按鈕）：
- 進(jìn)入捕獲階段：父元素沒(méi)加
capture，所以捕獲階段不觸發(fā)parentClick。 - 進(jìn)入目標(biāo)階段：觸發(fā)按鈕自己的點(diǎn)擊（但按鈕邏輯在冒泡階段，所以這一步不算 “觸發(fā)方法”）。
- 進(jìn)入冒泡階段：先觸發(fā)子元素的
childClick→ 再觸發(fā)父元素的parentClick。
控制臺(tái)輸出：
子元素（冒泡階段）觸發(fā)
父元素（冒泡階段）觸發(fā)
三、加 capture 修飾符：強(qiáng)制 “捕獲階段” 觸發(fā)
給父元素加 @click.capture，讓父元素的事件 在捕獲階段就觸發(fā)，改變執(zhí)行順序。
示例（加 capture 修飾符）：
<div class="parent" @click.capture="parentCapture"> 父元素 <button class="child" @click="childBubble">子元素（按鈕）</button> </div>
methods: {
parentCapture() { console.log('父元素（捕獲階段）觸發(fā)'); },
childBubble() { console.log('子元素（冒泡階段）觸發(fā)'); }
}執(zhí)行順序（點(diǎn)擊按鈕）：
- 進(jìn)入捕獲階段：父元素加了
capture，所以先觸發(fā)parentCapture。 - 進(jìn)入目標(biāo)階段：觸發(fā)按鈕自己的點(diǎn)擊（不影響方法順序）。
- 進(jìn)入冒泡階段：觸發(fā)子元素的
childBubble。
控制臺(tái)輸出：
父元素（捕獲階段）觸發(fā)
子元素（冒泡階段）觸發(fā)
四、核心區(qū)別：“捕獲階段” vs “冒泡階段”
| 場(chǎng)景 | 觸發(fā)順序（點(diǎn)擊子元素） | 關(guān)鍵邏輯 |
|---|---|---|
| 無(wú) capture | 子（冒泡） → 父（冒泡） | 默認(rèn)是冒泡階段 |
| 父加 capture | 父（捕獲） → 子（冒泡） | 父元素 “插隊(duì)” 到捕獲階段執(zhí)行 |
五、再舉個(gè)極端例子（多層嵌套）
<div class="grandpa" @click.capture="grandpaCapture">
爺爺元素
<div class="parent" @click.capture="parentCapture">
爸爸元素
<button class="child" @click="childBubble">孫子按鈕</button>
</div>
</div>methods: {
grandpaCapture() { console.log('爺爺（捕獲）觸發(fā)'); },
parentCapture() { console.log('爸爸（捕獲）觸發(fā)'); },
childBubble() { console.log('孫子（冒泡）觸發(fā)'); }
}執(zhí)行順序（點(diǎn)擊孫子按鈕）：
- 捕獲階段：爺爺（最外層）→ 爸爸（中間層）→ 孫子（目標(biāo)）
→ 先觸發(fā)grandpaCapture→ 再觸發(fā)parentCapture - 目標(biāo)階段：觸發(fā)孫子按鈕（無(wú)
capture，不影響） - 冒泡階段：觸發(fā)
childBubble
控制臺(tái)輸出：
爺爺（捕獲）觸發(fā)
爸爸（捕獲）觸發(fā)
孫子（冒泡）觸發(fā)
六、一句話總結(jié) capture
capture 修飾符的作用是：讓事件在 “捕獲階段” 就觸發(fā)，改變默認(rèn)的 “冒泡階段觸發(fā)” 順序，實(shí)現(xiàn) 父元素優(yōu)先響應(yīng)（不管子元素有沒(méi)有觸發(fā)，父元素先執(zhí)行自己的邏輯）。
記住一個(gè)關(guān)鍵點(diǎn)：
- 默認(rèn)是 “子 → 父”（冒泡）
- 加
capture是 “父 → 子”（捕獲）
@click.capture，相當(dāng)于是是改變事件傳播順序的 “插隊(duì)符”
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過(guò)程
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時(shí)常會(huì)遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問(wèn)題,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue-element中el-input輸入卡頓問(wèn)題的解決
這篇文章主要介紹了Vue-element中el-input輸入卡頓問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問(wèn)題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項(xiàng)目時(shí),需要引入一個(gè)第三方的js文件,在index.html中通過(guò)以下方式引入JS文件編譯后就報(bào)了這個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)
這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue項(xiàng)目 git提交及服務(wù)器部署方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07