vue 事件&按键修饰符

• 事件修饰符

1. .stop
event.stopPropagation()，阻止冒泡
2. .prevent
event.preventDefault()，阻止默认
3. .capture
   捕获模式,内部元素触发的事件先在此解决，而后才交由内部元素进行解决，用于改变冒泡顺序

<div @click="clickIt">        <a @click="aClick">123456</a></div>//<div @click.capture="clickIt">       // <a @click="aClick">123456</a>//</div>//jsclickIt() {      console.log("#######外层div click");},aClick() {      console.log("#######内层a click");},

未加.capture：

4. .self
event.target 是当前元素自身时触发
5. .once
   事件将只会触发一次，自己设置的组件事件可用
6. .passive
   告诉浏览器你不想阻止事件的默认行为，相当于addEventListener

• 按键修饰符

1. .enter 回车键
2. .tab 制表符
3. .delete“删除”和“退格”键
4. .esc 退出
5. .space 空格
6. .up 上键
7. .down 下键
8. .left 左键
9. .right 右键

注意：.13之类的keyCode已不推荐使用

• 系统修饰键

1. .ctrl
2. .alt
3. .shift
4. .meta

注意：各个系统键盘不同

• .exact 修饰符

符允许你控制由准确的系统修饰符组合触发的事件

• 鼠标按钮修饰符

1. .left
2. .right
3. .middle

注意

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

参考

事件修饰符
系统修饰键