Vue 事件修饰符(prevent、stop、capture、self、once)

609 阅读1分钟
  1. prevent:阻止默认事件;

  2. stop:阻止事件冒泡;

  3. once:事件只触发一次;

  4. capture:使用事件的捕获模式;

  5. self:只有event.target是当前操作的元素时才触发事件;

1、prevent:阻止默认事件

代码:

运行结果:

a标签的默认有跳转到href的行为,我们把默认行为禁用后,就不会跳转页面

补充:如果不使用Vue指令,那么怎么屏蔽事件的默认行为呢?

2、stop:阻止事件冒泡

代码:

运行结果:

如果不阻止事件冒泡:

补充:如果不使用Vue指令,那么怎么阻止事件冒泡呢?

3、once:事件只触发一次

代码:

运行结果:

4、capture:使用事件的捕获模式

代码:

运行结果:

关闭事件捕获:

分析原因:

5、self:只有event.target是当前操作的元素时才触发事件

代码:

运行结果:

因为event.target不是当前操作的元素,所有没有触发事件,这个在一定程度上面也可以阻止冒泡。

补充:如果不加指令会怎么样?

发生了事件冒泡