有过JS事件代码开发经验的一定对event.preventDefault()（阻止节点默认行为）和event.stopPropagation()（阻止事件冒泡）不陌生，这是处理DOM事件时很常见的方法，vue将其封装成简短易用的事件修饰符，可以后缀于事件名称之后。
事件修饰符v-on
| 名称 |
可用版本 |
可用事件 |
说明 |
| .stop |
所有 |
任意 |
当事件触发时，阻止事件冒泡 |
| .prevent |
所有 |
任意 |
当事件触发时，阻止元素默认行为 |
| .capture |
所有 |
任意 |
当事件触发时，阻止事件捕获 |
| .self |
所有 |
任意 |
限制事件仅作用于节点自身 |
| .once |
2.1.4以上 |
任意 |
事件被触发一次后即解除监听 |
| .passive |
2.3.0以上 |
滚动 |
移动端，限制事件用不调用preventDefault()方法 |
例如@submit.prevent="submit"
按键修饰符@keyup
| 别名修饰符 |
键值修饰符 |
对应按键 |
| .delete |
.8/.46 |
回格 / 删除 |
| .tab |
.9 |
制表 |
| .enter |
.13 |
回车 |
| .esc |
.27 |
退出 |
| .space |
.32 |
空格 |
| .left |
.37 |
左 |
| .up |
.38 |
上 |
| .right |
.39 |
右 |
| .down |
.40 |
下 |
例如： @keyup.13="console.log($event)"或者@keyup.enter=""
鼠标修饰符
| 修饰符 |
可用版本 |
对应按键 |
| .left |
2.2.0 以上 |
左键 |
| .right |
2.2.0 以上 |
右键 |
| .middle |
2.2.0 以上 |
中键 |
组合修饰符
| 修饰符 |
可用版本 |
对应按键 |
| .ctrl |
2.1.0 以上 |
Ctrl键 |
| .alt |
2.1.0 以上 |
Alt键 |
| .shift |
2.1.0 以上 |
Shift键 |
| .meta |
2.1.0 以上 |
meta键（Windows系统键盘上为田键） |
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
