Как определить, не нажата ли клавиша при наведении? - PullRequest
5 голосов
/ 17 сентября 2010

Я хотел бы показать один div только тогда, когда другой div находится на отметке и пробел не работает . Я пытался использовать keyCode и which свойства события, но ни одно из них не сработало. Хотя я мог бы создать пример для нажатой клавиши CTRL, а не пробела, как вы можете видеть также здесь .

Как мне изменить код, чтобы он работал с пробелом (или любой другой клавишей) вниз?

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

Ответы [ 2 ]

9 голосов
/ 17 сентября 2010

Вы можете использовать тот факт, что .hover() связывает 2 обработчика. Один для мышиного центра и один для мышиного отпуска.

Привязать .keydown() к мышиному центру и просто .unbind() к мышевому выходу

$(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 пример


Важное замечание: .hover() будет работать, даже если окно не было сфокусировано, но .keydown() будет работать, только если окно находится в фокусе.

0 голосов
/ 17 сентября 2010

При наведении курсора я бы устанавливал флаг, а затем при выходе из состояния наведения я сбрасывал флаг.затем, когда нажимается пробел, вы можете проверить, находитесь ли вы в режиме наведения.

Я не уверен, что зависание и пробел могут быть захвачены так, как вы хотели бы.

edit

в jquery вы можете объединить event.which и event.hover на одном и том же элементе и, может быть, вы можете объединить их в цепочку.

я быстро взгляну, но яне нравятся ваши шансы.

edit 2

проблема в том, что div не получит никаких ключевых событий.я думаю, что вам нужно прикрепить ключевой слушатель к документу и навести курсор на элемент div и сохранить флаг.

вы можете связать события, подобные этому $('#myElement").bind('hover keydown', function(){});

...