使用原生 JavaScript 模拟按键

Question

我正在尝试在我的应用程序中模拟键盘命令。目前，我可以按任意箭头键，并且能够很好地捕获事件。但是，我正在尝试模拟关键事件，但我没有任何运气。

这是我的代码：

  //Event
  this.remoteEvent = function(arg_event) {
    var e = document.createEvent('KeyboardEvent');
    var method = (typeof e.initKeyboardEvent !== 'undefined') ? "initKeyboardEvent" : "initKeyEvent";

    switch (arg_event) {
      case 'up':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 38);
        break;
      case 'right':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 39);
        break;
      case 'down':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 40);
        break;
      case 'left':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 37);
        break;
      case 'enter':
        e[method]('keydown', true, true, window, false, false, false, false, 0, 13);
        break;
    }

    document.dispatchEvent(e);
  }

我接近错误了吗？我的目标是不使用 jQuery，主要是跨浏览器兼容。

编辑：这是我在发送前记录的事件：

KeyboardEvent {
  altGraphKey: false
  altKey: false
  bubbles: true
  cancelBubble: false
  cancelable: true
  charCode: 0
  clipboardData: undefined
  ctrlKey: false
  currentTarget: null
  defaultPrevented: false
  detail: 0
  eventPhase: 0
  keyCode: 0
  keyIdentifier: "false"
  keyLocation: 0
  layerX: 0
  layerY: 0
  location: 0
  metaKey: true
  pageX: 0
  pageY: 0
  path: NodeList[0]
  repeat: false
  returnValue: true
  shiftKey: false
  srcElement: document
  target: document
  timeStamp: 1410276114922
  type: "keydown"
  view: Window
  which: 0
}

Edit2：这是我捕获事件的代码：

document.addEventListener('keydown', key_down_event, false);

//Key down event
function key_down_event(arg_event)
{
  //Ignore all key events if any modifier key is pressed
  if (arg_event.altKey || arg_event.ctrlKey || arg_event.metaKey || arg_event.shiftKey) return;

  //Get the source
  var source = arg_event.target;
  var destination = null;
  var direction = null;
  var escape = false;

  //Switch on key
  switch(arg_event.keyCode)
  {
    case VK_LEFT: direction = 'left'; break;
    case VK_RIGHT: direction = 'right'; break;
    case VK_DOWN: direction = 'down'; break;
    case VK_UP: direction = 'up'; break;
    case VK_ESC: escape = true; break;
  }
  if (!direction && !escape) return;

  arg_event.stopPropagation();
  arg_event.preventDefault();

  console.log(direction);
}

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent，

initKey*Event

方法完全被破坏。比较它提供的不同 API：

• DOM2 旧：

  void initKeyEvent(in DOMString typeArg, 
                    in boolean canBubbleArg, 
                    in boolean cancelableArg, 
                    in boolean ctrlKeyArg, 
                    in boolean altKeyArg, 
                    in boolean shiftKeyArg, 
                    in boolean metaKeyArg, 
                    in unsigned long keyCodeArg, 
                    in unsigned long charCodeArg, 
                    in views::AbstractView viewArg);
  

• DOM3（不支持 Gecko）：

  void initKeyboardEvent(in DOMString typeArg,
                         in boolean canBubbleArg,
                         in boolean cancelableArg,
                         in views::AbstractView viewArg,
                         in DOMString charArg,
                         in DOMString keyArg,
                         in unsigned long locationArg,
                         in DOMString modifiersListArg,
                         in boolean repeat);
  

• Webkit/眨眼：

  void initKeyboardEvent(in DOMString typeArg,
                         in boolean canBubbleArg,
                         in boolean cancelableArg,
                         in views::AbstractView viewArg,
                         in DOMString keyIndentifierArg,
                         in unsigned long locationArg,
                         in boolean ctrlKeyArg,
                         in boolean altKeyArg,
                         in boolean shiftKeyArg,
                         in boolean metaKeyArg,
                         in boolean altGraphKeyArg)
  

• 微软：

  void initKeyboardEvent(in DOMString typeArg,
                         in boolean canBubbleArg,
                         in boolean cancelableArg,
                         in views::AbstractView viewArg,
                         in DOMString keyArg,
                         in unsigned long locationArg,
                         in DOMString modifierListArg,
                         in boolean repeatArt,
                         in DOMString locationArg);
  

规格说明：

initKeyboardEvent 方法已弃用。事件构造函数语法 […] 是用于初始化 KeyboardEvent 的预期未来语法。

但是，我找不到详细说明构造函数初始化的规范。在那之前，您可能想要使用这个 polyfill。