vue事件符的.capture用法，含義是捕獲。

先看一個4層結構的div盒子：div(最外層) > div(爺爺) > div(父親) > div(兒子)

<template><div><div @click="handleCatch('最外層')">最外層<div @click="handleCatch('抓到了爺爺')">抓到了爺爺<div @click="handleCatch('抓到了父親')">抓到了父親<div @click="handleCatch('抓到了兒子')">抓到了兒子</div></div></div></div></div> </template> <script>export default {methods: {handleCatch(msg) {console.log(msg)}} } </script> <style lang="scss" scoped></style>

點擊最里層兒子,則會冒泡打印輸出，輸出為

現在給@click添加.capture修飾符

一、首先添加單個.capture給每層盒子，點擊“兒子”看效果

<div @click="handleCatch('最外層')">最外層<div @click="handleCatch('抓到了爺爺')">抓到了爺爺<div @click.capture="handleCatch('抓到了父親')">抓到了父親<div @click="handleCatch('抓到了兒子')">抓到了兒子</div></div></div></div>

點擊“兒子”看效果

2. 給爺爺加

<div @click="handleCatch('最外層')">最外層<div @click.capture="handleCatch('抓到了爺爺')">抓到了爺爺<div @click.capture="handleCatch('抓到了父親')">抓到了父親<div @click="handleCatch('抓到了兒子')">抓到了兒子</div></div></div></div>

點擊“兒子”看效果

3. 給最外層加

<div @click.capture="handleCatch('最外層')">最外層<div @click.capture="handleCatch('抓到了爺爺')">抓到了爺爺<div @click.capture="handleCatch('抓到了父親')">抓到了父親<div @click="handleCatch('抓到了兒子')">抓到了兒子</div></div></div></div>

點擊“兒子”看效果

總結：

? 1. 冒泡是從里往外冒，捕獲是從外往里捕。

? 1. 當捕獲存在時，先從外到里的捕獲，剩下的從里到外的冒泡輸出。

參考鏈接：https://www.cnblogs.com/yeminglong/p/15165686.html

總結

以上是生活随笔為你收集整理的vue事件修饰符：通过@click.capture捕获内层事件（爷爷-父亲-儿子）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。