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

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)" >

然后，打字稿代码像常规一样具有捕获事件的函数：

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

在测试它是否有效时，我注意到，如果我不直接将鼠标悬停在组件的父级上，子级的 id 就会记录在控制台中，这不会使静态路由到应该更改的元素成为可能。

是否可以保持mouseover/mouseout在整个组件上可用，但仍然只能获取整个组件的最高父级的 id？

Answer 1

您可以参考event.currentTarget而不是event.target：Event 接口的 currentTarget 只读属性 [...] 始终指的是已附加事件处理程序的元素，而不是 Event.target，后者标识发生事件的元素并且可能是其事件处理程序的元素。后裔。在下面的代码片段中请注意，无论哪个元素触发事件，currentTarget始终是包含<li>元素：function doStuff(e) {  console.clear();  console.log(`target: ${e.target.className}`); // div-child  console.log(`currentTarget: ${e.currentTarget.className}`); // li-parent}ul {  list-style: none;  margin: 0;  padding: 1rem;  background: tomato;}li {  padding: 0.25rem;  background: bisque;}li div {  background: white;  margin: 0.5rem;  padding: 0.5rem;}<ul>  <li class="li-parent" onmouseover="doStuff(event)">    <div class="div-child">child 1</div>    <div class="div-child">child 2</div>  </li></ul>

Answer 2

尝试一下event.stopPropagation()。这将阻止事件的冒泡。