javascript - 如何映射移动触摸事件以在 Javascript 中模拟按键向上/向下？

Question

我有两个类似按钮的 div 元素，我想将它们映射到键盘上的左右箭头键。

<div id="leftBtn" ontouchstart="simKeyDown(event, LEFT_KEYCODE);" ontouchend="simKeyUp(event, LEFT_KEYCODE);" onmspointerup="simKeyUp(event, LEFT_KEYCODE);" onmspointerdown="simKeyDown(event, LEFT_KEYCODE);"><img src="../images/left.png"></div>

<div id="rightBtn" ontouchstart="simKeyDown(event, RIGHT_KEYCODE);" ontouchend="simKeyUp(event, RIGHT_KEYCODE);" onmspointerup="simKeyUp(event, RIGHT_KEYCODE);" onmspointerdown="simKeyDown(event, RIGHT_KEYCODE);"><img src="../images/right.png"></div>

然后在我的Javascript中我有：

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
                    
//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {

**something goes here**

}

我被困在最后一个功能上，我想将触摸事件映射到按键。任何帮助或方向将不胜感激。我也对其他实施方式持开放态度。

标签： javascripttouch-event

Answer 1

您可以使用 2 个变量来跟踪是否按下了左/右键。基于此，您可以在画布渲染动画方法中检查这些值以处理必要的操作。例如：

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

每当调用 keyUp 或 keyDown 方法时，您都可以将变量更新为 ture/false

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {
  if (eventType === 'KeyUp') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = true
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = true
    }
  }

  if (eventType === 'KeyDown') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = false
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = false
    }
  }

}

如果您有任何 requestframe 方法或动画方法，您可以检查这些值并进行所需的更新。

例如：

function animate() {

  if (LEFT_KEY_PRESSED ) {
    player.left++
  }

  if (RIGHT_KEY_PRESSED ) {
    player.right++
  }

}