Как я могу переопределить ярлыки браузера, но сохранить внутренний приемник нажатия клавиш?

Question

связанных вопросов

1. Прослушивание - Как прослушать событие нажатия клавиши на всей странице?
2. Переопределить - Как переопределить листы Google ярлыки браузера?

Я пытаюсь создать веб-страницу, которая поможет людям создавать макросы для LUAMacros. Часть этого состоит в том, чтобы интерпретировать нажатия клавиш в браузере, это может вызвать горячие клавиши браузера

        <script>
        document.body.addEventListener('keydown', (event) => {
                       event.preventDefault();
        });
    </script>

, это предотвратит реакцию браузера на встроенные горячие клавиши. однако также не позволяет компоненту angular прослушивать нажатие клавиши

@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    this.key = event.key;
    console.log(this.key);
    event.preventDefault();
}

Без сценария браузер реагирует на ярлыки, однако при этом компонент не будет запускать вышеуказанный хост-прослушиватель.

компоненты 'event.preventDefault ();' Появляется, чтобы ответить после того, как браузер распознает ярлык.

Между прочим, я пытаюсь определить [CTRL + k], который chrome использует для поиска.

Answer 1

Вы можете использовать тот факт, что события всплывают в DOM-дереве. В своем коде Angular слушайте события, как вы уже это делаете: подключив прослушиватель событий к document. В глобальной части страницы просто слушайте window вместо document.

Каждое происходящее событие сначала будет вызвано на document (что позволит вам выполнить пользовательское действие). Если Event#stopPropagation не вызывается, он затем всплывает до window (где вы его поймаете и предотвратите поведение по умолчанию, как определено браузером).

<script>
  window.addEventListener('keydown', event => {
    event.preventDefault()
  })
</script>

@HostListener('document:keypress', ['$event'])
public handleKeyboardEvent (event: Event) {
  event.preventDefault()
}