使用jQuery，为什么当我只点击两个键之一时调用这个函数？

Question

我有这个代码：

$(document).bind('keydown', 'ctrl+1', function () {
    alert('You found the hotkey ctrl+1!');
});

但是如果我点击 Ctrl 或 1 键，这段代码似乎火了。我只希望在按下两个键时触发此代码。

我错过了什么？

Answer 1

直接使用jQuery事件而不是绑定。使用事件对象的 ctrlKey 属性可以知道是否按下了 Ctrl。

$(document).keydown("1", function(e){
    if(e.ctrlKey)
        alert("Ctrl+1 pressed");
});

它没有经过测试，但我想它应该可以工作。

Answer 2

正如你在documentation中看到的，bind函数的第二个参数是eventData，也就是

An object containing data that will be passed to the event handler.

这用于从用作处理程序的内部函数外部访问变量，以避免从闭包访问可变变量时出现问题。

如果您想过滤触发操作的键，只需在函数内部处理即可。

$(document).bind("keydown", function(ev){ // notice the function argument
    if(ev.ctrlKey && ev.keyCode == 49){ // 49 being the keyCode for "1"
        alert("Foo!");
    }
});

Answer 3

您可以直接使用jQuery的keydown功能，查看按下的键。

$('body').keydown(function (e){
    if (e.ctrlKey && e.keyCode == 49)
        alert("Ctrl+1 pressed");
});

Answer 4

利用jQuery hotKeys。它会让你的生活更轻松。您将能够执行以下操作：

$(document).bind('keydown', 'ctrl+1', function () {
    alert('You found the hotkey ctrl+1!');
});

另一个库是 Mouse trap。它可以让您执行以下操作：

Mousetrap.bind('command+shift+k', function(e) {
    highlight([6, 7, 8, 9]);
    return false;
});

Answer 5

每次按键时都会调用此函数，但我已经检查了某个条件下的键码。我们可以在“if 条件”中实现所需的功能。只有当 Ctrl 键和 1 被按下时，条件才会执行。

$(document).on('keydown', 'body', function(event) {

    if (event.ctrlKey && event.keyCode == 49) {

        alert("Ctrl+1 pressed");
    }
});

Answer 6

您需要检查 keydown 事件以及 Ctrl 键是否被按下

$(document).keydown('1', function(e) {
    if (e.ctrlKey) {
        alert('Ctrl 1 was pressed.');
    }
});

为了澄清你的问题，你错过了检查 ctrl 事件。

Answer 7

使用：

document.body.addEventListener('keypress', function (event) {
    var key = event.which || event.keyCode;
    if(key.ctrlKey && key == 49) {
        alert("Ctrl+1 pressed);
    }
}

这应该有所帮助。您将事件 listener 添加到 HTML 代码的 body 并监听哪个键被按下。

$(document).ready(function () {
    document.body.addEventListener('keypress', function (event) {
        var key = event.which || event.keyCode;
        if (key.ctrlKey || key == 49) {
            alert("Ctrl+1 pressed");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>

    <body>
        <p>empty page</p>
    </body>
</html>

Answer 8

关键字“+”成为 CSS 选择器。它不是键盘事件（keydown、keypress 和 keyup）的侦听器。

在这种情况下，您不需要 CSS 选择器来检测键。这个魔法对应一个事件，因此有一个接收事件的函数...function(event)或者function(e).该参数包含您需要的一切。

现在事件通过属性 "which" 或属性 "keyCode" 来标识密钥。这里有点复杂，因为哪个和keycode，取决于浏览器支持。

现在，也许必须检查 jQuery 页面上的 keydown 事件，观察第 41 行，以及按键时的结果，特别是 keycode 和 which 属性。

最后，目标正在同时检测到 Ctrl 键和另一个键。重要的是要知道它是一个特殊的键，必须用 ctrlKey 替换哪个数字并用属性 which 或 keyCode.

评估数字。

jQuery link 到 keydown 和让你知道你按下的键号（哪个或键码）的例子是 here.

您的代码最终将如下所示：

$(document).bind('keydown', function (e) {
    if((e.crtlKey && (e.which == 49)) || (e.crtlKey && (e.which == 97))) {
        alert('You found the hotkey ctrl+1!');
    }
});

代码中的数字49对应字母键盘部分的数字="1"。

数字97对应数字键盘部分的数字="1"

Answer 9

你做错了。当你按下一个键时，key down 事件会触发，它不关心你是否按下了另一个键。请使用 keyup 事件。

$(document).bind('keyup', 'ctrl+1', function () {
    alert('You found the hotkey ctrl+1!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 10

试试这个：

$(document).keypress("1",function(e) {
  if(e.ctrlKey)
    alert("You found the hotkey ctrl+1!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p>Press CTRL+1 to show alert.</p>

更多信息here。

使用jQuery，为什么当我只点击两个键之一时调用这个函数？

Using jQuery, why is this function being called when I only click one of the two keys?

jquery

keydown