需要调试帮助:防止退格键向后导航

Debugging help needed: Prevent backspace from navigating back

我有一个 webapp,它使用退格键来达到自己的目的。我长期以来一直使用以下功能,调用 document.keyup,多年来一直没有问题:

function keyupKeys (evt) {
  if(this.activeElement.id == 'q') return true; //ignore input to the search box
  if(!evt) var evt = window.event;
  var code = evt.keyCode;

  //handle special keys:
  switch(code) {
    case  9: // tab
    case 39: // right arrow
      press('colon'); break;
    case 37: // left arrow
      press('colon');
      press('colon'); break;
    case 13: // enter
      press('eq'); break;
    case  8: // backspace
      press('bs'); break;
    case 46: // delete
    case 144:// numpad clear
      press('c'); break;
    case 27: // esc
      press('ac'); break;
    default: // Not a key this function handles
      return true;
  }
  return false;
};

最近,我发现 Windows 中的 Chrome 和 Linux 中的 Chromium 已开始在按下退格键时向后导航。过去不是这样的。我还没有测试其他浏览器。

关于 SO 的相关问题让我修改了退格大小写:

case  8: // backspace
  if(evt.preventDefault) evt.preventDefault();
  press('bs'); break;

但是,此更改没有效果。此外,由于浏览器正在返回,我无法使用 Javascript 控制台中的任何调试工具,所以我不知道发生了什么。

任何人都可以解释发生了什么并提出解决方法吗?

您应该监听 keydown,而不是 keyup 事件。

阅读 this answer 让我认为问题可能是由于在 keyup 而不是 keydown 上调用我的函数引起的。我清楚地记得很久以前我第一次写这段代码时,我使用 keyup 来解决某种问题;我不再记得是什么了。无论如何,我创建了以下要调用的函数 onkeydown。好像解决了问题

function keydownKeys(evt) {
  if(this.activeElement.id == 'q') return true; //ignore input to the search box
  if(!evt) var evt = window.event;
  var code = evt.keyCode;
  if(code == 8) {
    if(evt.preventDefault) {
      evt.preventDefault(); //kill backspace triggering back button
    }
    return false;
  }
  return true;
}