关键事件;不在Firefox中工作。但是,在chrome工作

时间:2016-08-09 07:17:15

标签: javascript key-events



$("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>
&#13;
&#13;
&#13;

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

除此之外,即使对于D3.js

,也需要解决这个问题

提前致谢

3 个答案:

答案 0 :(得分:2)

正如metal03326所指出的,;的密钥代码在Chrome和Firefox之间是不同的。 This page包含不同浏览器如何处理keyCodes的细分。

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

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

不推荐使用.keyCode属性,您不应该使用它。 MDN page for KeyboardEvent同样说:

  

警告:不推荐使用此属性;如果可以的话,你应该使用KeyboardEvent.key

完整摘录:

&#13;
&#13;
$("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 ;");
  }
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在Firefox中,;代码 59 。您可以查看here

答案 2 :(得分:0)

$("body").on("keydown", function (evt) {
   var isFirefox = typeof InstallTrigger !== 'undefined';
  if (evt.keyCode === 186 && !isFirefox) {
    $("#message").html("Pressed ;");
  } else if(evt.keyCode === 59 && isFirefox){
    $("#message").html("Pressed ;");
  }else {
    $("#message").html("not Pressed ;");
  }
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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