(mouseenter)事件上e.currentTarget的Typescript类型

Question

HTML:

<li class="nav-item">
<a
class="nav-link"
routerLinkActive="active"
routerLink="about"
(mouseenter)="onLinkHover($event)"
>About</a
>
</li>

TypeScript：

onLinkHover(e: any) {
this.isHoverMenuOpen = true;
if (this.isHoverMenuOpen && !e.currentTarget.classList.contains('active')) {
e.currentTarget.classList.toggle('active');
}
document.querySelectorAll('.nav-link').forEach((link) => {
if (e.currentTarget.innerHTML !== link.innerHTML) {
link.classList.remove('active');
}
});
}

我有一个工作的Angular代码，看起来如上所述，但我不想使用"；任何"；事件类型的类型。TypeScript中此事件的正确类型是什么？

我尝试的任何类型都会出现错误："；类型"HTMLDivElement"上不存在属性"currentTarget"。ts(2339)">

Answer 1

错误不是因为any是一种类型。你可以根据需要拥有它。

由于CurrentTarget属性的工作方式，错误正在发生。您在某个地方错误地引用了它，因为错误显示HTMLDivElement，但我们在发布的代码中没有看到任何div。

Event接口的currentTarget只读属性标识事件的当前目标。它始终引用事件处理程序所指向的元素附加，而不是Event.target，后者标识上的元素哪个事件发生了，哪个可能是它的后代。

event.currentTarget的值仅在事件正在处理。如果您控制台.log()事件对象，则将其存储在变量，然后在控制台中查找currentTarget键值将为null。相反，您可以直接console.log(event.currentTarget)，以便能够在控制台中查看它或者使用调试器语句，该语句将暂停代码，从而向您显示event.currentTarget.的值

点击此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget