javascript - Typescript:如何检查 eventTarget 中的 tagName？

Question

为什么在这种情况下:

var ele = <HTMLDivElement>document.getElementById("toolbar");
    ele.addEventListener("click", function (e) { 
        if (e.target.tagName === "SPAN") { console.log(e.target.tagName) }  }, false);

Visual Studio 向我显示此错误？

Build: Operator '===' cannot be applied to types 'HTMLElement' and 'string'.

Property 'tagName' does not exist on type 'EventTarget'.

当我运行脚本时工作正常。

怎么写才合适？

谢谢。

Answer 1

我会像这样调整代码片段:

var ele = <HTMLDivElement>document.getElementById("toolbar");
    ele.addEventListener("click", (ev: MouseEvent) => {
        var element = ev.target as HTMLElement;     
        if (element.tagName === "SPAN") { 
            console.log(element.tagName) 
        }  
    }, false);

将 event 属性 target 转换为 HTMLElement 将为我们提供底层 元素 的所有正确属性。

检查 the playground