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

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()。这将阻止事件的冒泡。