黑马程序员技术交流社区

标题: 【广州前端】keypress事件无法使用方向键的解决办法 [打印本页]

---

作者: AreYouGlad    时间: 2017-12-6 16:38
标题: 【广州前端】keypress事件无法使用方向键的解决办法

查看更多精彩前端资源

---

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

---

作者: xiaojiyao    时间: 2017-12-6 16:46
貌似很有道理的样子……

---

作者: AreYouGlad    时间: 2017-12-13 17:44

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2