VUE-事件修饰符
事件修饰符
| 事件修饰符 | |
| .stop | 阻止冒泡 |
| .prevent | 阻止默认行为，针对<a></a>链接而言 |
| .capture | 实现捕获触发事件的机制 |
| .self | 实现只有点击当前元素时候，才会触发事件处理函数 |
| .once | 只触发一次事件处理函数 |
1、dom元素的结构如下，点击div3输出3；点击div2输出2；点击div1输出1。
冒泡和捕获的过程如下所示：
2、.stop阻止冒泡事件
给div1添加stop事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | 2 3 |
|
| div1 | @click.stop | 1 |
给div2添加stop事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | @click.stop | 2 |
| div1 | 1 2 |
给div3添加stop事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | @click.stop | 3 |
| div2 | 2 3 |
|
| div1 | 1 2 3 |
3、.capture实现捕获触发事件的机制
给div1添加capture事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | 2 3 |
|
| div1 | @click.capture | 1 2 3 |
给div2添加capture事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | @click.capture | 2 3 |
| div1 | 2 1 3 |
给div3添加capture事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | @click.capture | 3 |
| div2 | 3 2 |
|
| div1 | 3 1 2 |
4、.stop和.self的不同：
.self只有点击当前元素时候，才会触发事件处理函数，不点击则不会触发事件，直接跳过元素。
给div2添加stop事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | @click.stop | 2 |
| div1 | 1 2 |
给div2添加self事件，输出结果展示：
| 点击对象 | 添加事件 | 输出结果 |
| div3 | 3 | |
| div2 | @click.self | 2 3 |
| div1 | 1 3 |