Как вызвать событие наведения мыши только один раз, когда внутри элемента есть два дочерних элемента

Question

Недавно у меня появился такой элемент:

<p>Some text
<a href='#'>
    <img src="">
    Some text 1
</a></p>

Когда я добавляю событие при наведении курсора на a и нахожу курсор на Some text 1, это вызовет событие при наведении курсора один раз. Однако, когда я перемещаю мышь с Some text 1 на изображение, происходит другое событие при наведении мыши. Как я могу убедиться, что событие при наведении мыши запущено только один раз? Большое спасибо!

Answer 1

Я решил свою проблему. Я обнаружил, что использование Mouseenter вместо этого не будет иметь такой проблемы.

Answer 2

То, что здесь происходит, это то, что называется «пузырем событий». Вам нужно только применить событие mouseover к тегу. Если вы примените if к тегу p, он будет срабатывать при наведении указателя мыши на любой дочерний элемент и сам тег p. Все дочерние элементы отправляют события в стек.

<!-- 
   This will cause the duplicated fired events when mouse over any element
   inside the p tag and over the child elements
-->
<p id="hoverOverMe">Some text
  <a href='#'>
    <img src="">
    Some text 1
  </a>
</p>

Рабочий пример

<p >Some text
  <a id="hoverOverMe" href='#'>
    <img src="">
    Some text 1
  </a>
</p>

<script>
  document.querySelector('#hoverOverMe')
    .addEventListener('mouseover', event => {
      console.log(event);
  });
</script>