事件修饰符
- .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
使用. 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 只会阻止对元素自身的点击.
参考
事件修饰符
系统修饰键
来源: http://www.jianshu.com/p/60edfba9b296