VUE-事件修饰符.stop、.prevent、.capture、.self、.once

事件修饰符

 

事件修饰符
.stop	阻止冒泡
.prevent	阻止默认行为，针对<a></a>链接而言
.capture	实现捕获触发事件的机制
.self	实现只有点击当前元素时候，才会触发事件处理函数
.once	只触发一次事件处理函数

1、dom元素的结构如下，点击div3输出3；点击div2输出2；点击div1输出1。

冒泡和捕获的过程如下所示：

2、.stop阻止冒泡事件

点击对象	添加事件	输出结果
div3	@click	3
div2	@click	2 3
div1	@click.stop	1

点击对象	添加事件	输出结果
div3	@click	3
div2	@click.stop	2
div1	@click	1 2

3、.capture实现捕获触发事件的机制

点击对象	添加事件	输出结果
div3	@click.capture	3
div2	@click	3 2
div1	@click	3 1 2

点击对象	添加事件	输出结果
div3	@click	3
div2	@click.capture	2 3
div1	@click	2 1 3

4、.stop和.self的不同：

点击对象	添加事件	输出结果
div3	@click.self	3
div2	@click	2
div1	@click	1 2

点击对象	添加事件	输出结果
div3	@click	3
div2	@click.self	2 3
div1	@click	1 3

点击对象	添加事件	输出结果
div3	@click	3
div2	@click.self	2 3
div1	@click	1 2 3

.self只有点击当前元素时候，才会触发事件处理函数，不点击则不会触发事件，直接跳过元素。