jQuery 如何创建和触发动态热键（键码和 :not() 选择器？）

Question

我正在开发一个网络应用程序，我希望用户能够动态定义和触发热键。我希望有人能帮助我？

我用相关的 HTML 创建了一个 JSFiddle HERE 。

这是我的 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') 更好的选择器来防止在输入输入期间触发轨道？

感谢您的帮助！

Answer 1

$(document).not('input') 未找到所有不是 input 标记的元素。它找到所有不是输入元素（都是其中之一）的文档节点（其中有一个）。您所做的就是将处理程序附加到文档。由于父元素会收到其子元素触发的事件的通知，因此所有 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 元素，则处理程序不会执行任何操作。