Javascript 使用html按钮复制键盘事件

我尝试了几种方法来实现这一点。我有一个JavaScript弹球游戏，使用键盘键作为控件。我正在将其转换为触摸屏显示的应用程序。作为一种解决方法，我希望覆盖按钮，点击按钮时可以模拟键盘笔划。我做了一些研究，听起来应该行得通。我正在使用jqueryv3.2.1

以下是我到目前为止尝试过的东西

HTML元素：

<input type="button" class="coil"></input>

$('.coil').trigger({type: 'keydown', which: 40, keyCode: 40});

这个在控制台中返回一个错误

（（jQuery.event.special[handleObj.origType]| | |（中间值））.handle | | handleObj.handler）。apply不是函数

下面是处理关键侦听器的游戏引擎的JavaScript

addKeyListener: function (keyAndListener) {
  this.keyListeners.push(keyAndListener);
},

// Given a key, return the associated listener.

findKeyListener: function (key) {
  var listener = undefined;

  for(var i=0; i < this.keyListeners.length; ++i) {
     var keyAndListener = this.keyListeners[i],
         currentKey = keyAndListener.key;
     if (currentKey === key) {
        listener = keyAndListener.listener;
     }
  };
  return listener;
 },

 // This method is the call back for key down and key press
 // events.

 keyPressed: function (e) {
  var listener = undefined,
      key = undefined;

  switch (e.keyCode) {
     // Add more keys as needed

     case 32: key = 'space';        break;
     case 68: key = 'd';            break;
     case 75: key = 'k';            break;
     case 83: key = 's';            break;
     case 80: key = 'p';            break;
     case 37: key = 'left arrow';   break;
     case 39: key = 'right arrow';  break;
     case 38: key = 'up arrow';     break;
     case 40: key = 'down arrow';   break;
  }

  listener = this.findKeyListener(key);
  if (listener) { // listener is a function
     listener();  // invoke the listener function
  }
 },

lastKeyListenerTime = 0,  // For throttling arrow keys

game.addKeyListener(
{
  key: 'k',
  listener: function () {
     if ( !launching && !gameOver) {
        rightFlipperRiseTimer.start();
        rightFlipperAngle = 0;
        game.playSound('flipper');
       }
    }
  }
);

game.addKeyListener(
 {
  key: 'd',
  listener: function () {
     if ( !launching && !gameOver) {
        leftFlipperRiseTimer.start();
        leftFlipperAngle = 0;
        game.playSound('flipper');
      }
  }
 }
);

game.addKeyListener(
{
  key: 'p',
  listener: function () {
     togglePaused();
  }
}
);

game.addKeyListener(
 {
  key: 'up arrow',
  listener: function () {
     var now;

     if (!launching || launchStep === 1)
        return;

     now = +new Date();
     if (now - lastKeyListenerTime > 80) { // throttle
        lastKeyListenerTime = now;
        launchStep--;
        actuatorSprite.painter.image = launchImages[launchStep-1]; 
        ballSprite.top = BALL_LAUNCH_TOP + (launchStep-1) * 9;
        adjustActuatorPlatformShape();
     }
  }
}
);

game.addKeyListener(
{
  key: 'down arrow',
  listener: function () {
     var now;

     if (!launching || launchStep === LAUNCH_STEPS)
        return;

     now = +new Date();
     if (now - lastKeyListenerTime > 80) { // throttle
        lastKeyListenerTime = now;
        launchStep++;
        actuatorSprite.painter.image = launchImages[launchStep-1]; 
        ballSprite.top = BALL_LAUNCH_TOP + (launchStep-1) * 9;
        adjustActuatorPlatformShape();
     }
  }
 }
);

---

谢谢大家，我找到了一种方法，可以使用JavaScript中的事件监听器而不是jQuery

      document.getElementById("coil").addEventListener("click", function () {

     if (!launching || launchStep === LAUNCH_STEPS)
        return;
        launchStep++;
        actuatorSprite.painter.image = launchImages[launchStep-1]; 
        ballSprite.top = BALL_LAUNCH_TOP + (launchStep-1) * 9;
        adjustActuatorPlatformShape();
     });

---

我想你错过了一个活动。。解释如何触发键盘按键。我得到的结果与答案中的建议相同。这就是我提出这个问题的原因。我相信它应该有用，但是不行。你可以试试这样的，也许？您的第二位代码将不起作用，因为您正在捕获将事件处理程序添加到

body

元素（这将是一个包含

body

元素的jQuery对象）的结果，并将其作为事件处理程序传递给

.coil

元素的单击事件。

      document.getElementById("coil").addEventListener("click", function () {

     if (!launching || launchStep === LAUNCH_STEPS)
        return;
        launchStep++;
        actuatorSprite.painter.image = launchImages[launchStep-1]; 
        ballSprite.top = BALL_LAUNCH_TOP + (launchStep-1) * 9;
        adjustActuatorPlatformShape();
     });