头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

Vue事件符.capture的含义用法

2021-12-18
#Vue事件符 #Vue

今天我们来学习一下Vue事件符.capture的含义用法，跟着我一起来学习吧~
学习参考：
https://blog.csdn.net/catascdd/article/details/108273931

一、.capture的含义

vue事件符的.capture用法，含义是捕获。
先看一个4层结构的div盒子：div(最外层) > div(爷爷) > div(父亲) > div(儿子)

Image1.png

点击最里层儿子,则会冒泡打印输出，输出为:

Image1.png

现在给@click添加.capture修饰符

1. 首先添加单个.capture给每层盒子，点击“儿子”看效果

1.1 给父亲加

Image1-1.png

Image1-2.png

1.2. 给爷爷加

Image1-3.png

Image1-4.png

1.3. 给最外层加

Image1-5.png

Image1-6.png

2. 首先添加多个.capture给每层盒子，点击“儿子”看效果

2.1.给父亲和爷爷加

Image2-1.png

Image2-2.png

2.2. 给父亲和最外层加

Image2-3.png

Image2-4.png

2.3. 给父亲、爷爷、最外层加

Image2-5.png

Image2-6.png

2.4. 给每一层都加

Image2-7.png

Image2-8.png

总结：

  1. 冒泡是从里往外冒，捕获是从外往里捕。
  2. 当捕获存在时，先从外到里的捕获，剩下的从里到外的冒泡输出。
Lililich's Blog
66Article 38Tags 13Categories