javascript - jQuery - 单击和按键事件的行为相同

Question

我正在编写一个简单的内存游戏，需要使其可以使用鼠标和键盘。我可以为箭头键构建监听器，以便在卡片网格中移动，但我不能让 Enter 键事件模拟​​启动 openCard 函数的“单击”事件。代码如下:

-HTML(这基本上是卡片网格)

<div id="game_container">
        <div id="game_board">
            <div id="card1" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card2" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card3" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card4" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card5" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card6" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card7" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card8" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card9" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card10" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card11" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card12" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card13" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card14" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card15" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card16" class="browsable colorcard lastinline"><div class="colour"></div></div>                
            <div class="fixfloat"></div>
            <div id="msg"></div>
        </div>

这是 jQuery 部分:

$(document).ready(function() {

$(".colour").hide();
$("#game_board div").click(openCard);
$(".browsable:first").addClass("selected");

shuffle();

$(document).keydown(function(e) {
    var cur_idx = $(".browsable").index($(".selected"));
    var max_idx = $(".browsable").length - 1;
    var row_length = 4;
    switch (e.keyCode) {
        case 13:
            // Perform some action when enter is placed
            // HERE should I define what happens when I press ENTER
            break;
        case 37:
            // Navigate left
            if (cur_idx === 0) {
                var next_idx = 0;
            } else {
                var next_idx = cur_idx - 1;
            }
            break;
        case 38:
            // Navigate up
            if ((cur_idx - row_length) <= 0) {
                var next_idx = 0;
            } else {
                var next_idx = (cur_idx - row_length);
            }
            break;
        case 39:
            // Navigate right
            if (cur_idx === max_idx) {
                var next_idx = cur_idx;
            } else {
                var next_idx = cur_idx + 1;
            }
            break;
        case 40:
            // Navigate down
            if ((cur_idx + row_length) >= max_idx) {
                var next_idx = max_idx;
            } else {
                var next_idx = (cur_idx + row_length);
            }
            break;
    }
    if (typeof next_idx !== 'undefined') {
        $(".browsable.selected").removeClass("selected");
        $(".browsable").eq(next_idx).addClass("selected");
    }
});

function openCard() {

    id = $(this).attr("id");

    if ($("#" + id + " .colour").is(":hidden")) {
        $("#game_board div").unbind("click", openCard);

        $("#" + id + " .colour").slideToggle('fast');

        if (coloropened === "") {
            boxopened = id;
            coloropened = $("#" + id + " .colour").css("background-color");
            setTimeout(function() {
                $("#game_board div").bind("click", openCard);
            }, 300);
        } else {
            currentopened = $("#" + id + " .colour").css("background-color");
            if (coloropened !== currentopened) {
                // close again

                setTimeout(function() {
                    $("#" + id + " .colour").fadeOut(1000);
                    $("#" + boxopened + " .colour").fadeOut(1000);
                    boxopened = "";
                    coloropened = "";
                }, 400);
                points--;
                $("#points").html("" + points);
            } else {
                // found
                $("#" + boxopened + ".colorcard").css('visibility', 'hidden');
                $("#" + id + ".colorcard").css('visibility', 'hidden');
                found++;
                points++;
                boxopened = "";
                coloropened = "";
                $("#points").html("" + points);
            }
            setTimeout(function() {
                $("#game_board div").bind("click", openCard);
            }, 400);
        }

        count++;
        $("#count").html("" + count);

        if (found === 8) {
            $("#msg").show();
        }
    }
}

$('#restart_button').click(function() {
    resetGame();
});

});

谢谢!

Answer 1

尝试触发调用点击事件....还安装了Keycode尝试哪个....这将适用于捕获 Enter 按键事件:

$(document).keypress(function(e) {
    if(e.which == 13) {
        $("#game_board div").trigger('click');
    }
});