-
事件修饰符
-
.stop
event.stopPropagation(),阻止冒泡 -
.prevent
event.preventDefault(),阻止默认 -
.capture
捕获模式,内部元素触发的事件先在此处理,然后才交由内部元素进行处理,用于改变冒泡顺序
<div @click="clickIt">
<a @click="aClick">123456</a>
</div>
//<div @click.capture="clickIt">
// <a @click="aClick">123456</a>
//</div>
//js
clickIt() {
console.log("#######外层div click");
},
aClick() {
console.log("#######内层a click");
},
未加.capture:

使用
.capture:
-
.self
event.target是当前元素自身时触发 -
.once
事件将只会触发一次,自定义的组件事件可用 -
.passive
告诉浏览器你不想阻止事件的默认行为,相当于addEventListener
-
按键修饰符
-
.enter回车键 -
.tab制表符 -
.delete“删除”和“退格”键 -
.esc退出 -
.space空格 -
.up上键 -
.down下键 -
.left左键 -
.right右键
注意:.13之类的keyCode已不推荐使用
-
系统修饰键
.ctrl.alt.shift.meta
注意:各个系统键盘不同
-
.exact修饰符
符允许你控制由精确的系统修饰符组合触发的事件
-
鼠标按钮修饰符
.left.right.middle
注意
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent只会阻止对元素自身的点击。










