angular - 获取对当前事件的 HTMLElement 的引用

Question

所以我有一个 Angular 2 和 Typescript 项目，我想清除特定点击时页面上的所有焦点。

现在我只是使用 document.activeElement 获取当前事件的元素，然后对其调用 .blur()。然而，这在语义上是不正确的，当然 TypeScript 正在对此进行调整(这是理所当然的)。

有什么方法可以完成同样的事情，但要确保我引用的是 HTMLElement 而不是 Element 以便我可以正确输入内容？

基本上，当 A) 单击子导航并且单击的菜单项已经打开时，我调用一个函数来关闭所有子菜单，并且 B) 当在非菜单项的任何位置单击文档时。

这里是被调用的函数:

closeMenus = function(){
    for (var i=0, j=this.openElements.length; i<j; i++){
        this.openElements[i] = false;
    };

    document.activeElement.blur();
};

这给出了错误:

Property 'blur' does not exist on type 'Element'

绝对正确，它存在于 HTMLElement 上。但是，如果我添加这一行:

console.log(document.activeElement instanceof HTMLElement);

这返回真。所以我对 TypeScript 到底想要什么感到非常困惑？

Answer 1

文档的activeElement 可以是任何Element，而不仅仅是一个HTMLElement。在编译时，编译器不知道元素的类型。因此，如果您用 instanceof 检查包围调用，编译器就会知道 activeElement 必须是要执行的代码的 HTMLElement 并允许引用。

if (document.activeElement instanceof HTMLElement) {
  document.activeElement.blur();
}

这种方法不需要您跳过获取不同 Angular 绑定(bind)的步骤来执行您已经可用的方法。更少的代码和更少的依赖!