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

Question

我正在创建一个复杂的浏览器内应用程序,我想使用Chrome和/或其他主流浏览器目前使用的一些键盘快捷键.我在线搜索并找不到覆盖浏览器快捷方式的方法,但我看到Google表格只具有我想要的功能:用户可以选择一个选项来覆盖浏览器快捷方式.

Google表格如何使其发挥作用？

更新:澄清,因为这已经得到了一些downvotes:我知道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和modifiers.