使用Javascript进行密钥导航

时间:2013-09-25 22:08:59

标签: javascript navigation key

请帮忙!我花了一个星期的时间来完成这个游戏,这是我最近被困在了几天的最后一次。我知道那里的一些技术人员可能会瞥一眼并轻弹一下。但是我对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元素不会聚焦,尽管得到它并调用焦点方法,我试图在没有运气的元素上触发鼠标悬停。请帮助我,我把我的硕士论文放在一边尽管已经在紧张的时间表上做这个游戏,这是一个工作岗位的要求。我已经完成了整个游戏逻辑并且一切运行良好,如果我发送代码,它肯定会被丢弃,因为它不符合关键的导航要求...我绝望我甚至会付钱,如果我需要 - 侮辱学生

3 个答案:

答案 0 :(得分:1)

查看this

这是我的测试解决方案,也许是相同的...也许可以帮助你:)如果是,请使用它作为提示,不要复制我的所有代码:D

此致

L,

答案 1 :(得分:0)

您可以绑定到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对象的不同索引下)。

答案 2 :(得分:0)

使其更方便()没必要:

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

然后绑定到keydown,按键不会捕获箭头键 并做这样的事情:

$(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")
    }
});