vue中事件修饰符

Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

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

stop

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

<!-- 阻止事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 

prevent 

阻止默认事件发生， 默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

<a v-on:click.prevent="doThat"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

capture 

捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自 然顺序执行触发的事件

点击最内层

有多个capture 

点击最内层

self 

将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

once 

设置事件只能触发一次，比如按钮的点击等。

passive

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符

这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

注：用修饰符时，顺序很重要；相应代码会以同样的顺序产生。用 @click.prevent.self 会阻止所有的点击,@click.self.prevent 只会阻止对元素自身的点击。

文章