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>
//js
clickIt() {
      console.log("#######外层div click");
},
aClick() {
      console.log("#######内层a click");
},

未加.capture：

未加capture

使用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只会阻止对元素自身的点击。

参考

事件修饰符
系统修饰键