jquery - 如何判断鼠标悬停时是否按下了某个键？

Question

我想仅当另一个 div 悬停在且空格键按下时才显示一个 div。我尝试使用事件的 keyCode 和 which 属性，但它们都不起作用。不过，我可以创建一个按下 CTRL 键而不是空格键的示例，您也可以看到 here .

我应该如何更改代码，以便它可以在按下空格键(或任何其他键)时使用？

HTML:

<div class='a'></div>
<div class='b'></div>

CSS:

body {
    position: relative;
}
div {
    width: 100px;
    height: 100px;
    position: absolute;
}
.a {
    background: #777;
    left: 50px;
    top: 30px;
}
.b {
    display: none;
    background: #000;
    left: 250px;
    top: 100px;
}

JS:

$(function() {
    $('div').hover(function(e) {
        if (e.ctrlKey) {
            $('.b').show();
        }
    }, function() {
        if ($('.b').is(':visible')) $('.b').hide();
    });
});

Answer 1

您可以利用以下事实: .hover() 绑定(bind) 2 个处理程序。一种用于 mouseenter，一种用于 mouseleave。

绑定(bind) .keydown() 在 mouseenter 上，只需 .unbind() 放在 mouseleave 上:

$(function() {

      // Define the mouseenter and mouseleave handlers with hover
    $("div.a").hover(function() {

          // Show other div if a key is pressed.
          // You can of course check for on particular key.
        $(document).keydown(function() {
            $("div.b").show();
        });

    }, function() {

         // unbind the keydown handler on mouseleave
       $(document).unbind("keydown");

       $("div.b").hide();
    });
});​

<强> jsFiddle example

重要的一点是 .hover()即使窗口没有获得焦点， 也会起作用，但是 .keydown() 仅当窗口处于焦点状态时才有效。