Как не передавать (при наведении курсора) детям, но оставить функцию доступной на всем пространстве, которое занимает родитель?

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());
  }

Во время тестирования, если он работает, я заметил, что, если я не наведу курсор мыши непосредственно на родительский компонент, в консоли регистрируется идентификатор дочерних элементов, что не заставляет stati c маршрутизировать элементы, которые должны измениться. возможно.

Можно ли сохранить mouseover / mouseout доступным для всего компонента, но при этом получить только идентификатор самого высокого родителя всего компонента?

Answer 1

Вы можете ссылаться на event.currentTarget вместо event.target:

Свойство 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(). Это остановит бурение событий. Подробнее здесь: https://www.w3schools.com/jsref/event_stoppropagation.asp