如何不传递（鼠标悬停）给孩子，但要在父项占用的整个空间上保持功能可用？

Question

我有一个动态生成的列表，其中包含复杂的组件，应该在mouseover上进行处理。

由于我使用了Angular，所以我尝试在组件的最高父元素上使用(mouseover)="onhover($event)"和(mouseout)="onhover($event)来构建它，以获取它并从那里路由到应该更改的不同组件。

<div class="my-list_element" id="{{'my-list_element' + i}}" (mouseover)="onhover($event)" (mouseout)="onhover($event)" >

Typescript代码然后通常具有捕获事件的功能：

onhover(event: Event){
    let id = (event.target as HTMLInputElement).id;
    console.log(id.toString());
  }

虽然测试是否可行，但我注意到，如果我不直接将鼠标悬停在组件的父项上，则会在控制台中记录子项的ID，这不会导致静态路由到应更改的元素。

是否有可能在整个组件上保持mouseover / mouseout可用，但仍然仅获得整个组件的最高父代的ID？

Answer 1

尝试event.stopPropagation()。这将停止事件的冒泡。在这里阅读更多：https://www.w3schools.com/jsref/event_stoppropagation.asp

Answer 2

您可以引用event.currentTarget而不是event.currentTarget：