Google 表格如何覆盖浏览器快捷方式？

Question

我正在创建一个复杂的浏览器内应用程序，我想使用 Chrome 和/或其他主要浏览器当前使用的一些键盘快捷键。我在网上搜索并找不到覆盖浏览器快捷方式的方法，但我发现 Google 表格正是我想要的那种功能：用户可以选择一个选项来覆盖浏览器快捷方式。

Google 表格是如何完成这项工作的？

更新：澄清一下，因为这得到了一些反对意见：我知道 event.preventDefault()。问题是它似乎不适用于 Ctrl + t 之类的组合键（打开新标签）。

Answer 1

一般的想法是拦截事件并调用event.preventDefault() 如果它对应于您要覆盖的快捷方式。例如，如果您按control-1，以下代码将阻止您导航到最左侧的标签：

document.body.addEventListener('keydown', (event) => {
  // keyCode 49 corresponds to the "1" key
  if(event.keyCode==49 && event.ctrlKey) {
    event.preventDefault();
    console.log('default action prevented, doing custom action instead');
  }
});

body {
  background-color: yellow;
}

click me first

重复任意数量的 keyCodes 和修饰符。