Vue 取消键盘事件的默认行为，页面滚动条不随之上下滚动

幼稚猿

于 2021-11-19 16:53:20 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/MySundays/article/details/121426494

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue.js中使用@keydown.native指令绑定键盘事件，并通过keyCode属性来判断不同的方向键，实现对方向键的监听及阻止默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、绑定键盘事件

@keydown.native="onKeyDown"

2、事件

onKeyDown(e) {
    e.preventDefault()
    // 键盘按键判断:左箭头 37;上箭头 38；右箭头 39;下箭头 40
    if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 37 || e.keyCode == 39){ 
	    if(e.preventDefault){
		    e.preventDefault();
	    }else{
		    e.returnValue = false;
	    }
    }
}