如何在图像标签上注册击键？

Question

我正在制作一个具有按键和点击功能的点击游戏。我无法添加按键功能。我一直在使用jQuery来编写我的点击游戏。

var numClicks = 0;

$("#results").text("Money earned $" + numClicks);

$("img").on('click', function()

  {
    numClicks++;
    $("#results").text("Money earned $" + numClicks);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="results"></div>
 
    <img src="https://www.w3schools.com/html/img_girl.jpg" width="500" height="600">

我希望我的代码可以接收我的键盘输入作为点击而不必实际点击。我已经检查了几个不同的代码片段，这些代码可能有效，但没有运气。我的代码的结果几乎没有。什么都没发生。

Answer 1

使用jQuery lib通过键盘按键（或按住）增加变量的最简单代码：

$(document).ready(function() {
  var numClicks = 0;
  $("#results").text("Money earned $" + numClicks );

  $(document).on('keydown', function() {
    numClicks++;
    $("#results").text("Money earned $" + numClicks);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="results"></div>

Answer 2

而不是在图像上收听click，你可以在图像上注册keydown的听众。您还需要在tabindex或包含它的<img中添加div。

var numClicks = 0;

$("#results").text("Money earned $" + numClicks);

$("img").on('click', function() {
    numClicks++;
    $("#results").text("Money earned $" + numClicks);
  });



$('#myImage').bind('keydown', function(event) {
  //console.log(event.keyCode);
  numClicks++;
  $("#results").text("Money earned $" + numClicks);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="results"></div>
<div id="imageContainer" >
  <img id="myImage" tabindex="0" src="https://www.w3schools.com/html/img_girl.jpg" width="500" height="600"></div>