87

我有一个 javascript 游戏的想法（我将使用 EaselJS 制作它），我将不得不检测按键。在互联网上环顾四周后，我看到了很多建议（使用 window.onkeypress，使用 jQuery 等），但几乎每个选项都有反驳。你们有什么建议？使用 jQuery 听起来很容易，但我几乎没有使用该库的经验（而且我也不是 javascript 的资深人士）所以我宁愿避免使用它。如果 jQuery 是最好的选择，有人可以举一个很好的例子（解释会很棒）如何做到这一点？

我想这被问了很多，但我找不到任何明确的答案。提前致谢！

4

5 回答 5

118

使用纯 Javascript，最简单的是：

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

但是这样一来，您只能为事件绑定一个处理程序。

此外，您可以使用以下内容潜在地将多个处理程序绑定到同一事件：

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

在任何一种情况下，keyCode浏览器之间都不一致，因此需要检查和找出更多内容。注意e = e || window.event- 这是 Internet Explorer 的一个正常问题，将事件放入window.event而不是将其传递给回调。

参考：

使用 jQuery：

$(document).on("keypress", function (e) {
    // use e.which
});

参考：

除了 jQuery 是一个“大型”库之外，jQuery 确实有助于解决浏览器之间的不一致问题，尤其是窗口事件……这是不可否认的。希望很明显，我为您的示例提供的 jQuery 代码更优雅、更短，但以一致的方式完成了您想要的工作。您应该能够相信e（事件）和e.which（键代码，用于知道按下了哪个键）是准确的。在纯 Javascript 中，除非您执行 jQuery 库内部所做的所有事情，否则很难知道。

请注意，有一个keydown事件不同于keypress. 您可以在此处了解有关它们的更多信息：onKeyPress Vs。onKeyUp 和 onKeyDown

至于建议使用什么，如果您准备学习该框架，我肯定会建议使用 jQuery。同时，我想说你应该学习 Javascript 的语法、方法、特性，以及如何与 DOM 交互。一旦你理解了它是如何工作的以及发生了什么，你应该更容易使用 jQuery。对我来说，jQuery 让事情变得更加一致和简洁。最后，它是 Javascript，并包装了语言。

另一个非常有用的 jQuery 示例是 AJAX。浏览器与 AJAX 请求的处理方式不一致，因此 jQuery 将其抽象化，因此您不必担心。

这可能有助于决定：

于 2013-04-18T17:26:56.430 回答
41

KEYPRESS（回车键）
在片段内单击并按回车键。

香草

document.addEventListener("keypress", function(event) {
  if (event.keyCode == 13) {
    alert('hi.');
  }
});

香草速记(ES6)

this.addEventListener('keypress', event => {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

jQuery

$(this).on('keypress', function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery 经典

$(this).keypress(function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery 速记(ES6)

$(this).keypress((e) => {
  if (e.keyCode == 13)
    alert('hi.')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更短（ES6）

$(this).keypress(e=>
  e.which==13?
  alert`hi.`:null
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于一些要求，这里有一个解释：

我重写了这个答案，因为随着时间的推移，事情已经被弃用，所以我更新了它，因为评论中的一些人说它太多了“bla-bla”。它不是关于“keydown”，而是关于“keypress”。所以像“Esc”这样的非字符键不应该那样工作。

当文档准备好时，为了简洁起见，我曾经this专注于结果内的窗口范围，但这不是必需的。

已弃用：
and.which方法.keyCode实际上被认为已弃用，所以我会推荐.code，但我个人仍然使用 keyCode，因为性能要快得多，只有这对我来说很重要。jQuery 经典版本.keypress()并没有像某些人所说的那样被正式弃用，但它们不再是首选，.on('keypress')因为它具有更多功能（实时状态、多个处理程序等）。原版版本中的'keypress'事件也已被弃用。今天，人们应该更喜欢beforeinput或keydownkeyup。

性能：
越快越好。这就是为什么我更喜欢.keyCode即使它被认为已弃用（在大多数情况下）。不过，这完全取决于您（2020 年提交）。

性能测试

于 2016-09-10T23:20:19.883 回答
28

使用event.key和现代的 JS！

没有数字代码了。您可以直接使用"Enter"、"ArrowLeft"、"r"或任何键名，使您的代码更具可读性。

注意：旧的替代品 (.keyCode和.which) 已弃用。

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Mozilla 文档

支持的浏览器

于 2018-02-18T19:17:31.520 回答
6

有几种方法可以处理它；Vanilla JavaScript 可以很好地做到这一点：

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

或者更结构化的处理方式：

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);
于 2013-04-18T17:38:10.993 回答
3

不要过于复杂。

  document.addEventListener('keydown', logKey);
    function logKey(e) {
      if (`${e.code}` == "ArrowRight") {
        //code here
      }
          if (`${e.code}` == "ArrowLeft") {
        //code here
      }
          if (`${e.code}` == "ArrowDown") {
        //code here
      }
          if (`${e.code}` == "ArrowUp") {
        //code here
      }
    }
于 2020-04-25T19:15:24.123 回答