Angular中HostListener监听全局按键事件为何会干扰已聚焦HTML元素

1. 你混淆了焦点元素和事件监听挂载节点的逻辑 #

• 你在@HostListener里用了document:keydown前缀，这意味着这个监听器是直接挂载在全局document对象上，而非FooComponent的宿主元素上。只要FooComponent实例没有被销毁，这个全局监听器就会一直生效，和FooComponent本身是否获得焦点、是否处于活跃状态完全无关。
• DOM键盘事件的传播规则是：事件先派发给当前焦点元素（也就是你这里的input），之后会默认向上冒泡，依次经过该元素的所有父节点，一直到window对象。除非在冒泡路径上的某个监听器主动调用event.stopPropagation()终止冒泡，否则挂载在document上的监听器一定会触发，和焦点在哪个元素上没有关系。

2. 你错误假设了输入框会默认终止键盘事件冒泡 #

输入框获得焦点时，只会默认处理按键对应的输入逻辑（比如左箭头移动光标），但不会主动阻止事件向上冒泡，所以左箭头事件还是会一路冒泡到document，触发你写的回调逻辑，进而被你调用的stopPropagation()终止后续传播。

你只需要在执行你的自定义按键逻辑之前，先判断当前活跃元素是否是可输入元素即可，如果是就跳过处理：

@HostListener('document:keydown', ['$event'])
onKeydownHandler(event: KeyboardEvent): void { 
    // 新增判断：如果当前活跃元素是输入类元素，直接返回不处理
    const activeEl = document.activeElement;
    const isInputElement = ['INPUT', 'TEXTAREA'].includes(activeEl.tagName) || activeEl.isContentEditable;
    if (isInputElement) {
        return;
    }

    switch (event.code) {
        case 'ArrowLeft': {
            /* do something in this component */
            event.stopPropagation();
            break;
        }
    }
}

注：原代码中回调参数是event，但逻辑里写的是$event，属于笔误，需要修正为一致的变量名。

内容的提问来源于stack exchange，提问作者HelloWorld