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

最新推荐文章于 2024-04-21 21:55:54 发布

原创最新推荐文章于 2024-04-21 21:55:54 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

14 篇文章

订阅专栏

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

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;
	    }
    }
}