vue.js事件修饰符(阻止冒泡 默认行为)

vue事件对象

getEventDom  
 

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

1、事件冒泡（事件不会向上传递） 按上例中原生事件对象，要组织冒泡事件需要用到.preventDefault()，然而使用事件修饰符，仅需@click.stop即可。

parent
child
//阻止冒泡

2、阻止默认事件（不触发默认事件）

百度//阻止默认行为

3、指定元素触发（不包括子元素）

  2
  1

4、事件捕获方式（父->子）

parent

    child

5、绑定事件一次（触发后移除事件）

say

6、.capture事件默认是双向的，先捕获，在冒泡

(二).注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

（三).vue2.3 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

...

注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

原文链接：https://blog.csdn.net/gao_xu_520/article/details/80363260