How to not pass (mouseover) to children, but keep the function available on the whole space that the parent takes up?

Question

I have a dynamically generated list with complex components which should do stuff on mouseover.

Since I use Angular, I tried to build this using (mouseover)="onhover($event)" and (mouseout)="onhover($event) on the highest parent element of the components, to get it and route then from there to the different components which should change.

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

Typescript code then has as regular the function to catch the event:

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

While testing if it works I noticed that, if I not hover directly over the parent of component, the id of the children gets logged in the console, which does not make the static routing to the elements that should change possible.

Is it possible to keep the mouseover/mouseout available on the whole component but still only get the id of the highest parent of the whole component?

Answer 1

You could reference event.currentTarget instead of event.target:

The currentTarget read-only property of the Event interface [...] always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

In the snippet below notice that no matter what element triggers the event, currentTarget is always the containing <li> element:

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>