Question

我正在使用2个函数来检测按下的键是否与我想要的匹配，如果是，请执行某些操作。它就像Chrome中的魅力一样，但两种功能都不适用于Firefox。有没有办法可以让它在那里工作？

document.onkeypress = function() {
  if (event.charCode == 49) {
    alert("You pressed 1!");
  }
  if (event.charCode == 50) {
    alert("You pressed 2!");
  }
  if (event.charCode == 51) {
    alert("You pressed 3!");
  }
  if (event.charCode == 52) {
    alert("You pressed 4!");
  }
}

document.onkeydown = function() {
  if (event.keyCode == 122) {
    alert("You pressed F11!");
  }
}

<span>Press 1, 2, 3, 4 and F11 to launch different events.</span>

Answer 1

该代码中的主要问题是您依赖于全局event对象，该对象未在DOM事件规范中指定，并且是Chrome决定支持的特定于Microsoft的内容。

在符合标准的浏览器上，使用addEventListener并接受事件对象作为参数：

document.addEventListener("keypress", function(e) {
    // ....
}, false);

如果您需要支持IE8及更早版本（或者IE9 +处于破坏的“兼容性”模式），则需要attachEvent，希望您使用全局event对象：

document.attachEvent("onkeypress", function() {
    // ....
});

所以：

function handler(e) {
    e = e || window.event;
    // ...
}
if (document.addEventListener) {
    document.addEventListener("keypress", handler, false);
} else {
    document.attachEvent("onkeypress", handler);
}

第二个问题是charCode已被弃用; according to MDN，您应该使用which表示数值，或者（对于可打印字符）char表示（单字符）字符串。对于旧浏览器，您可能会回归charCode或keyCode。

我还会使用switch。

所以：

function handler(e) {
  e = e || window.event;
  switch (e.which || e.charCode || e.keyCode) {
    case 49:
      snippet.log("You pressed 1");
      break;
    case 50:
      snippet.log("You pressed 2");
      break;
    case 51:
      snippet.log("You pressed 3");
      break;
    case 52:
      snippet.log("You pressed 4");
      break;
  }
}
if (document.addEventListener) {
  document.addEventListener("keypress", handler, false);
} else {
  document.attachEvent("onkeypress", handler);
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

您忘记声明event参数。 Perhaprs Chrome会自动执行此操作。这适用于两个浏览器 -

document.onkeypress = function(event) {
  if (event.charCode == 49) {
    alert("You pressed 1!");
  }
  if (event.charCode == 50) {
    alert("You pressed 2!");
  }
  if (event.charCode == 51) {
    alert("You pressed 3!");
  }
  if (event.charCode == 52) {
    alert("You pressed 4!");
  }
}

document.onkeydown = function(event) {
  if (event.keyCode == 122) {
    alert("You pressed F11!");
  }
}

按特定键在JavaScript中执行某些操作适用于Chrome但不适用于Firefox

2 个答案: