jQuery Как создавать и запускать динамические горячие клавиши (селектор кода и: (не)?) - PullRequest
Новая
       11

jQuery Как создавать и запускать динамические горячие клавиши (селектор кода и: (не)?)

0 голосов
/ 14 мая 2011

У меня есть веб-приложение, над которым я работаю, и я бы хотел, чтобы пользователь мог динамически определять и запускать горячие клавиши. Я надеюсь, что кто-то может мне помочь?

Я создал JSFiddle ЗДЕСЬ с соответствующим HTML.

Вот мой JavaScript: 

// Assign Hotkey (this seems to be working)
$('input.hotkey').keydown( function(event) {
var hkey = event.keyCode;
if ( hkey == $('span#hk').text()){
    alert('This key is already in use');
} else
    $(this).parent().parent().prev().find('span#hk').text(hkey);
});

// Fire Hotkey (the problem might be here?)
$(document).not('input').keydown( function (event) {
    var hkey = event.keyCode;
    if (hkey == $('span#hk').text()){
         $("span#hk:contains("+hkey+")").parent().click();
    }
});

// Play Selected Track
$('#track').live('click', function () {
    // Fake Function
    var title = $('#title', this).text();
    alert(title + ' is playing...');
});

Примечание. Я уже использовал клавиши со стрелками «пробел» и «влево / вправо» в качестве глобальных горячих клавиш - есть ли способ защитить / предотвратить их назначение?

Есть ли лучший селектор для использования, чем .not ('input'), чтобы предотвратить запуск трека во время ввода?

Спасибо за помощь!

1 Ответ

2 голосов
/ 14 мая 2011

$(document).not('input') не находит все элементы, которые не являются тегами input. Он находит все узлы документа (из которых есть один), которые не являются элементами ввода (который является одним из них). Все, что вы сделали, это прикрепили обработчик к document. Поскольку родительские элементы уведомляются о событиях, вызванных их потомками, все keydown события обрабатываются этой функцией.

Вместо этого следует использовать event.target: 

$(document).keydown( function (event) {
    if (event.target.nodeName.toLowerCase() !== 'input') {
        var hkey = event.keyCode;
        if (hkey == $('span#hk').text()){
            $("span#hk:contains("+hkey+")").parent().click();
        }
    }
});

Оператор if означает, что обработчик ничего не делает, если событие возникло в элементе input.

...