在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。常见的事件修饰符如下:
-
.stop
-
.prevent
-
.capture
-
.self
-
.once
-
.native
-
.passive
… -
.stop 阻止冒泡(指阻止事件向上级DOM元素传递,比较常用)
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop = "doThis"></a>
- .prevent 阻止事件的默认行为(指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等)
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent = "doThat"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent = "onSubmit"></form>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
- .capture 捕获冒泡(即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件)
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture = "doThis">...</div>
- .self 将事件绑定到自身,只有自身才能触发(通常用于避免冒泡事件的影响)
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self = "doThat">...</div>
- .once 设置事件只能触发一次,比如按钮的点击等。
<!-- 提交事件只触发一次,不做重复提交 -->
<form v-on:submit.once = "onSubmit"></form>
- .native 在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。
<!--可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。-->
<div v-on:click.native = "doThis">...</div>
- .passive 该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的。
注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。