15

我正在尝试设置一个可以通过箭头键导航的菜单。我在 Firefox 中有这个工作鳍。

试图让它在 IE8 中工作，经过一番挣扎，发现这是因为 IE8 不会在箭头上注册按键。去测试：

$(document).keypress(function (eh){ 
    alert(eh.keyCode);
};

在 Firefox 中，按任意箭头键会触发 37、38、39 或 40 的警报。

在 IE8 中，什么都没有。标准 QWERTY 键盘上的任何其他键都会注册，但箭头键不会注册。

这是我的 Javascript 的问题吗？浏览器设置？Windows 设置？

4

4 回答 4

38

来自jQuerykeypress文档（介绍性文本的最后一段）：

请注意，keydownandkeyup提供一个代码，指示按下了哪个键，whilekeypress指示输入了哪个字符。例如，小写字母“a”将由keydownand报告为 65 keyup，但由 97报告keypress。所有事件都将大写“A”报告为 97。由于这种区别，在捕捉方向键等特殊击键时，.keydown()or.keyup()是更好的选择。

它甚至从字面上提到了箭头键；）因此，您确实需要挂钩keydown或keyup事件。这是一个带有的SSCCEkeydown，只需复制'n'paste'n'运行它。不，您不需要对 进行浏览器兼容检查event，这适用于从 IE6 到 Firefox 的所有浏览器。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2217553</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>
于 2010-02-08T00:04:52.583 回答
7

试试这个：

$(document).keydown(function (e) {
    if(!e) {
        e = window.event;
    }
    switch(e.keyCode) {
    case 37:
        goLeft();
        break;
    case 39:
        goRight();
        break;
    }
});
于 2010-02-07T17:39:02.257 回答
2

使用“keydown”事件

于 2010-02-07T17:34:35.503 回答
1

因为有时我不希望某些键的事件冒泡，所以我使用类似的方法：自定义您认为合适的代码/键。

/* handle special key press */
function checkCptKey(e)
{
    var shouldBubble = true;
    switch (e.keyCode)
    {
        // user pressed the Tab                                                                                                                                        
        case 9:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                shouldBubble = false;
                break;
            };
            // user pressed the Enter    
        case 13:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
            // user pressed the ESC
        case 27:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
};

/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
    return checkCptKey(e);
});
于 2010-02-07T23:50:19.873 回答