Replicate keyboard event with html button

Question

I have tried a few ways to make this happen. I have a JavaScript pinball game that uses keyboard keys as controls. I am converting it into an application for a touch screen display. As a workaround, I was hoping to overlay buttons that when clicked would simulate the keyboard strokes. I have done some research and it sounds like it should work. I am using jQuery v3.2.1

Here are the things I have tried so far...

HTML Element:

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

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

With this, I do not get any errors, simply nothing happens.

    var coilKey = $('body').keydown(function(e) {
      switch (e.keyCode) {
      case 40:
      break;}
    })

    $('.coil').click(coilKey);

This one returns an error in the console...

((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function

Below is the JavaScript for the game engine which handles the key listeners...

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
  }
 },

And here is the JavaScript that is triggered by the listeners...

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();
     }
  }
 }
);

I think you miss to give it an Event.. [this Answer](https://stackoverflow.com/a/832121/7111561) explains how to trigger keyboard presses — derHugo, Jul 25 '17 at 15:45
I am getting the same result this the suggestion from that answer. These are what led me to ask the question. I believe that it should work, but it doesn't. — KevMoe, Jul 25 '17 at 15:48
You could try something like this, maybe? https://stackoverflow.com/a/832121/4032946 — Avir94, Jul 25 '17 at 17:52
Your second bit of code won't work because you're capturing the result of adding an event handler to the `body` element (which would be a jQuery object containing the `body` element), and passing that as if it were an event handler to the click event for `.coil` elements. — Heretic Monkey, Jul 25 '17 at 17:52

score 0 · Answer 1 · answered Jul 25 '17 at 18:05

Thanks everyone, I found a way to make it work with event listeners in JavaScript rather than 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();
     });

Replicate keyboard event with html button

1 Answers1