查看更多精彩前端资源

---

在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事件的模拟，解决了我们的需求。

貌似很有道理的样子……