Javascript 按iframe上的空格键可向下滚动父页面，如何在不中断keyup事件的情况下防止出现这种情况

我的iframe游戏正在读取包括空格在内的键盘，但在某些浏览器Firefox上，Safari按下空格键也会向下滚动我的页面，这会导致我的游戏部分脱离屏幕。有时，当按下其他一些键时，页面甚至会向上滚动

我的游戏处理按键事件

input.addEventListener("keyup", function (e) {
//game handles all keys including space here
}

由于使用keyup事件，此答案不适用于防止空格；

如果我添加此代码，我的游戏将不接收keyup事件：

window.onkeydown = function(e) { 
  return !(e.keyCode == 32);
};

当我将上面的代码添加到父html页面（使用ifreme）时，它只有在单击键盘焦点以创建父html时才起作用。当焦点位于iframe内时，代码不起作用。 上面的代码似乎解决了Safari的问题

您需要默认设置

window.addEventListener'keydown'，e=>{ 如果e.keyCode===32{ e、 防止违约； } }; 查看此代码笔的演示：

您需要默认设置

window.addEventListener'keydown'，e=>{ 如果e.keyCode===32{ e、 防止违约； } };

---

查看此代码笔的演示：

您必须首先找到正确的窗口对象

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);

然后添加侦听器以阻止空格键事件冒泡

if (frame_win) {

  var preventSpace = (e) => {
      if (e.keyCode === 32) {
        e.preventDefault();
      }
    };

  frame_win.addEventListener('keydown', preventSpace);
  frame_win.addEventListener('keyup', preventSpace);
  frame_win.addEventListener('keypress', preventSpace);
}

---

您必须首先找到正确的窗口对象

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);

然后添加侦听器以阻止空格键事件冒泡

if (frame_win) {

  var preventSpace = (e) => {
      if (e.keyCode === 32) {
        e.preventDefault();
      }
    };

  frame_win.addEventListener('keydown', preventSpace);
  frame_win.addEventListener('keyup', preventSpace);
  frame_win.addEventListener('keypress', preventSpace);
}

onkeypress事件触发浏览器滚动。您可以在此事件中调用preventDefault，keyup和keydown事件将继续按预期触发

window.onkeypress = function(e) { 
    if (e.keyCode == 32) {
        e.preventDefault();
    }
};

window.onkeyup = function(e) { 
  console.log("Space key up!")
};

onkeypress事件触发浏览器滚动。您可以在此事件中调用preventDefault，keyup和keydown事件将继续按预期触发

window.onkeypress = function(e) { 
    if (e.keyCode == 32) {
        e.preventDefault();
    }
};

window.onkeyup = function(e) { 
  console.log("Space key up!")
};

---

这回答了你的问题吗？谢谢，游戏在iframe中，我将此代码添加到父html中，如果在游戏之外首先单击键盘焦点到父html，它似乎在那里工作。当keyb焦点位于游戏内部时，代码在相同来源的iframe中不工作？@Tom你能提供一个jsfiddle吗？这是否回答了你的问题？谢谢，游戏在iframe中，我将此代码添加到父html中，如果在游戏之外首先单击键盘焦点到父html，它似乎在那里工作。当keyb焦点位于游戏内部时，代码在相同来源的iframe中不起作用？@Tom你能提供一个JSFIDLE吗？谢谢，是的，这会从浏览器中删除空格功能，但问题是我在同一页面上有iframe，现在iframe中的内容不再能够接收空格，它使用以下代码：window.onkeypress=akeyPress；window.onkeydown=akeyDown；window.onkeyup=akeyUp；谢谢，是的，这将从浏览器中删除空间功能，但问题是我在同一页面上有iframe，现在iframe中的内容不再能够接收空间，它使用以下代码：window.onkeypress=akeyPress；window.onkeydown=akeyDown；window.onkeyup=akeyUp；