在JavaScript中如何实现同时触发多个HTML按钮的功能？

你的代码逻辑天生限制了同一时间只能识别单个操作：

• 所有按键/按钮按下的逻辑开头都加了if(state.arrowPressed) return;，只要有一个方向处于按下状态，新的操作会被直接拦截
• 状态state.arrowPressed仅存储单个方向值，无法同时记录多个按下的方向

1. 调整状态存储结构 #

将原来存储单个方向值的state.arrowPressed替换为多方向独立状态的对象，每个方向单独记录按下状态：

// 初始化state时替换原有arrowPressed字段
state.pressedArrows = {
  left: false,
  up: false,
  right: false,
  down: false
}
// 可新增工具方法判断当前是否有方向被按下
state.hasPressedArrow = () => Object.values(state.pressedArrows).some(Boolean)

2. 重写箭头按钮交互逻辑 #

const handleArrowButtonMouseDown = function() {
  $('button').on('mousedown touchstart', (e) => {
    e.preventDefault();
    const direction = $(e.target).closest('button').attr('id');
    // 仅更新当前点击方向的状态，不拦截其他方向操作
    state.pressedArrows[direction] = true;
    state.setRobotCommand();
  });
};

const handleArrowButtonMouseUp = function() {
  $('button').on('mouseup mouseleave touchend', (e) => {
    const direction = $(e.target).closest('button').attr('id');
    state.pressedArrows[direction] = false;
    // 所有方向都松开时才结束操作，否则更新当前多方向指令
    if (!state.hasPressedArrow()) {
      endCurrentOperation();
    } else {
      state.setRobotCommand();
    }
  });
};

3. 重写键盘按键交互逻辑 #

const handleArrowKeyDown = function() {
  $(document).keydown((e) => {
    let direction;
    switch(e.which) {
    case 37: 
      direction = 'left';
      break;
    case 38: 
      direction = 'up';
      break;
    case 39: 
      direction = 'right';
      break;
    case 40: 
      direction = 'down';
      break;
    default: return; 
    }
    e.preventDefault(); 
    // 避免系统重复触发keydown事件导致重复更新
    if (state.pressedArrows[direction]) return;
    state.pressedArrows[direction] = true;
    state.setRobotCommand();
  });
};

const handleArrowKeyUp = function() {
  $(document).keyup((e) => {
    let direction;
    switch(e.which) {
    case 37: 
      direction = 'left';
      break;
    case 38: 
      direction = 'up';
      break;
    case 39: 
      direction = 'right';
      break;
    case 40: 
      direction = 'down';
      break;
    default: return; 
    }
    state.pressedArrows[direction] = false;
    // 所有方向都松开时才结束操作，否则更新当前多方向指令
    if (!state.hasPressedArrow()) {
      endCurrentOperation();
    } else {
      state.setRobotCommand();
    }
  });
};

4. 同步调整指令生成逻辑 #

原有state.setRobotCommand方法需要同步修改，从读取单个state.arrowPressed改为读取state.pressedArrows中所有值为true的方向，生成对应的多方向操作指令，比如同时按下左和上时生成左上移动的指令。

内容的提问来源于stack exchange，提问作者atabey332