.keyCode vs. .which

Question

我以为这会在Stack Overflow上的某个地方得到解答,但我找不到它.

如果我正在收听按键事件,我应该使用.keyCode还是.which确定是否按下了Enter键？

我总是做类似以下的事情:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

但我看到的是使用的例子.which而不是.keyCode.有什么不同？是否比另一个更加跨浏览器友好？

Answer 1

有些浏览器使用keyCode,有些则使用which.如果你正在使用jQuery,你可以可靠地使用keyjQuery 标准化的东西.更多这里.

如果你不使用jQuery,你可以这样做:

var key = 'which' in e ? e.which : e.keyCode;

或者:

var key = e.which || e.keyCode || 0;

......它处理的可能性,code可能是code(通过恢复key到了最后,使用JavaScript的好奇,强大的code运营商).

Answer 2

jQuery的正常化event.which取决于是否event.which,event.keyCode或者event.charCode是由浏览器的支持:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

另外一个好处.which是jQuery也可以用于鼠标点击:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Answer 3

如果您使用vanilla Javascript,请注意keyCode现已弃用,将被删除:

此功能已从Web标准中删除.虽然有些浏览器可能仍然支持它,但它正在被删除.避免使用它并尽可能更新现有代码; 请参阅本页底部的兼容性表,以指导您的决定.请注意,此功能可能随时停止工作

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

而是使用:.key或.code取决于您想要的行为:https : //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US /文档/网络/ API /的KeyboardEvent /关键

两者都在现代浏览器上实现.

Answer 4

看看这个:https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

在按键事件中,按下的键的Unicode值存储在keyCode或charCode属性中,而不是两者都存储.如果按下的键生成一个字符(例如'a'),则charCode被设置为该字符的代码,尊重字母大小写.(即charCode考虑是否按住shift键).否则,按下的密钥的代码存储在keyCode中.keyCode始终在keydown和keyup事件中设置.在这些情况下,charCode永远不会被设置.要获取密钥的代码,无论它是存储在keyCode还是charCode中,都要查询哪个属性.通过IME输入的字符不会通过keyCode或charCode注册.

Answer 5

我event.key目前建议。MDN文档：https：//developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key

event.KeyCode并且event.which它们的MDN页面顶部都有讨厌的已弃用警告：
https : //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent /哪个

对于字母数字键，event.key似乎在所有浏览器中都实现相同。对于控制键（Tab，Enter，Escape等），event.key在Chrome / FF / Safari / Opera中具有相同的值，但在IE10 / 11 / Edge中具有不同的值（IE显然使用了较旧的规范版本，但彼此匹配（2018年1月14日）。

对于字母数字键，检查将类似于：

event.key === 'a'

对于控制字符，您需要执行以下操作：

event.key === 'Esc' || event.key === 'Escape'

我在这里使用示例在多个浏览器上进行测试（我必须在Codepen中打开并进行编辑才能使其与IE10一起使用）：https : //developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/码

event.code 在另一种答案中提到它是可能的，但是IE10 / 11 / Edge没有实现它，所以如果您要IE支持，那就来了。