Question

链接问题

我正在尝试创建一个网页，以帮助人们为LUAMacros构建宏。其中一部分是解释浏览器中的按键，这些按键可能会触发浏览器快捷方式

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

这将阻止浏览器响应内置的快捷方式。但是也可以防止角度分量听到按键的声音

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

在没有脚本的情况下，浏览器会响应快捷方式，但是使用该组件，组件将不会触发上述主机侦听器。

组件'event.preventDefault（）;'在浏览器识别出快捷方式后似乎会做出响应。

偶然地，我正在尝试解析Chrome用于搜索的[CTRL + k]。

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()
}

如何覆盖浏览器的快捷方式，但保持内部按键监听器？

1 个答案: