A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 AreYouGlad 于 2017-12-20 11:56 编辑



在js中,我们常用的键盘事件有keydown、keyup、keypress,分别对应了键盘按键按下、键盘按键弹起、键盘按键按住的事件。js也很贴心的为我们提供了event.keyCode属性来获取我们按下的具体按键码,但是,有一点需要注意,keypress事件并没有提供方向键的按键码。所以,我们在使用keypress事件时,是无法操作方向键的,导致了我们在做一些需要持续控制元素上下左右移动的操作时,使用keydown或keyup事件进行操作。在某些情况下,keydown、keyup在持续操作元素时会出现卡顿现象,今天我就为大家介绍一下我如何解决以上问题的思路。  
[JavaScript] 纯文本查看 复制代码
        let L = {};
        let U = {};
        let R = {};
        let D = {};
        $(window).keydown((e) => {
            switch (e.keyCode) {
                case 37:
                    clearInterval(L.timer);
                    L.timer = setInterval(() => {
                        console.log("left");
                    }, 17)
                    break;
                case 38:
                    clearInterval(U.timer);
                    U.timer = setInterval(() => {
                        console.log("up");
                    }, 17)
                    break;
                case 39:
                    clearInterval(R.timer);
                    R.timer = setInterval(() => {
                        console.log("right");
                    }, 17)
                    break;
                case 40:
                    clearInterval(D.timer);
                    D.timer = setInterval(() => {
                        console.log("down");
                    }, 17)
                    break;
                default:
                    break;
            }
        })
        $(window).keyup((e) => {
            switch (e.keyCode) {
                case 37:
                    clearInterval(L.timer);
                    break;
                case 38:
                    clearInterval(U.timer);
                    break;
                case 39:
                    clearInterval(R.timer);
                    break;
                case 40:
                    clearInterval(D.timer);
                    break;
                default:
                    break;
            }
        })      
  其实,keypress事件相当于就是keydown事件到keyup事件之间的过程,即按键按下到弹起之间的过程。明白了这个思路,我们就可以通过使用keydown和keyup事件来模拟keypress事件。如以上代码,我们在按下一个方向键时,设置定时器持续执行代码,当我们弹起该方向键时,再清除定时器,完成了对keypress事件的模拟,解决了我们的需求。



2 个回复

正序浏览
回复 使用道具 举报
xiaojiyao 来自手机 初级黑马 2017-12-6 16:46:02
沙发
貌似很有道理的样子……
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马