javascript - 的按键事件；不在 Firefox 中工作。但是，在 chrome 中工作

Question

$("body").on("keydown", function (evt) {
  if (evt.keyCode === 186) {
    $("#message").html("Pressed ;");
  } else {
    $("#message").html("Not Pressed ;");
  }
})

d3.select("body").on("keydown", function () {
  if (d3.event.keyCode === 186) {
    $("#d3-message").html("D3 - Pressed ;");
  } else {
    $("#d3-message").html("D3 - Not Pressed ;");
  }
})

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

jQuery
<div id="message"></div>

<hr>
D3
<div id="d3-message"></div>

我的代码中有这种逻辑，这只适用于 chrome，不适用于 firefox

除此之外，即使是 D3.js 也需要解决这个问题

提前致谢

Answer 1

正如 metal03326 指出的那样，; 的键码在 Chrome 和 Firefox 之间是不同的。 This page包含不同浏览器如何处理 keyCodes 的分割。

您可以通过检查 .key 属性来解决这个问题:

$("body").on("keydown", function (evt) {
    if (evt.key === ';') { console.log("pressed ;"); }
})

.keyCode 属性已弃用，您不应使用它。 MDN page for KeyboardEvent说了这么多:

Warning: This attribute is deprecated; you should use KeyboardEvent.key instead, if available.

完整片段:

$("body").on("keydown", function (evt) {
  if (evt.key === ';') {
    $("#message").html("Pressed ;");
  } else {
    $("#message").html("Not Pressed ;");
  }
})

d3.select("body").on("keydown", function () {
  if (d3.event.key === ';') {
    $("#d3-message").html("D3 - Pressed ;");
  } else {
    $("#d3-message").html("D3 - Not Pressed ;");
  }
})

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

jQuery
<div id="message"></div>

<hr>
D3
<div id="d3-message"></div>