Как зарегистрировать нажатия клавиш на теге изображения?

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

Вместо прослушивания 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>

Answer 2

Простейший код для увеличения переменной путем нажатия (или удерживания) клавиши клавиатуры с помощью 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>