使用 Javascript 进行按键导航

Question

请帮忙！我花了一周的时间来完成这个游戏，这是我几天来一直坚持的最后一次抱团。我知道那里的一些技术人员可能会看一眼并轻弹一些东西。但是我对javascript不是很复杂，因此需要一些帮助。

 $(document).keydown(function(e){
    // left arrow
    if (e.keyCode == 37 && currentCell > 0) { 
       currentCell--;
       ChangeCurrentCell();
       return false;
    }
    // up arrow
    if (e.keyCode == 38 && currentRow > 0) { 
       currentRow--;
       ChangeCurrentCell();
       return false;
    }
    // right arrow
    if (e.keyCode == 39 && currentCell < MAX_CELL) { 
       currentCell++;
       ChangeCurrentCell();
       return false;
    }
    //down arrow
    if (e.keyCode == 40 && currentRow < MAX_ROW) { 
       currentRow++;
       ChangeCurrentCell();
       return false;
    }
    // enter key
    if (e.keyCode == 13) {
    }
     });

 function ChangeCurrentCell()
 {
    document.getElementById(Boxes[currentRow + currentCell]).focus();
    SimulateMouseOver(document.getElementById(Boxes[currentRow + currentCell]));
 }

 // function will trigger event of selecting current focus.
 function selectElement()
 {
 }
 $(document).ready(function(){
    loadDivs()
// will give initial focus to top left element paving way for key navigation
   ChangeCurrentCell();
  // above gives first element in Boxes the focus when loading. 

div 元素不会聚焦，尽管得到了它并调用了 focus 方法，我试图触发鼠标悬停在元素上但没有运气。请协助我，我把我的硕士论文放在一边，尽管已经有一个紧凑的时间表来做这个游戏，这是工作职位的要求。我已经完成了整个游戏逻辑，一切都运行良好，如果我按原样发送代码，它肯定会被丢弃，因为它不符合关键导航要求......我很绝望，如果我需要，我什至会付钱 - 沮丧的学生

Answer 1

看看这个

这是我的测试解决方案，也许是一样的...也许可以帮助你:)如果是，请将其用作提示，不要复制我的所有代码:D

问候

L.

Answer 2

可以绑定到 document.keydown 事件以捕获击键。然后，您可以使用event.which（由jQuery规范化）来确定按下了哪个键。

$(document).on("keydown", function (event) {
    if (event.which === 37) {
        //code for left arrow
    } else if (event.which === 38) {
        //code for up arrow
    } else if (event.which === 39) {
        //code for right arrow
    } else if (event.which === 40) {
        //code for down arrow
    }
});

更新

我刚刚注意到你没有用jQuery标记你的问题。要使用本机 JS，您必须更改绑定到 document.keydown 事件的方式以及确定按下的键的方式（不同的浏览器实现将信息存储在 event 对象的不同索引下）。

Answer 3

为了更方便（）没有必要：

`var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32;`

然后绑定到键下，按键不捕捉箭头键并做这样的事情：

$(document).bind("keydown", function (e){
    var which = e.which;
    var navigationKeyWasPressed = which !== undefined && which >= 39 && which <= 40; 
    //do nothing if no significant key was pressed
    if (!navigationKeyWasPressed ) {
        return;
    }
    if ($(".selectedWithKey").length === 1){
        switch (which) {
            case LEFT:
                //...
                break;
            case UP:
                //...
                break;
            case RIGHT:
                //...
                break;
            case DOWN:
                //...
                break;
            case SPACE:
                //turn card
                break;
            default: //non arrow pressed
            //...
        }
    } else {
        // if no card is selected, select one to start arrow navigation
        $(".sponsor:first").addClass("selectedWithKey")
    }
});