当元素中有两个子元素时，如何仅触发一个鼠标悬停事件

Question

最近我有一个这样的元素：

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

当我在a上添加鼠标悬停事件并在Some text 1上悬停时，它将触发一次鼠标悬停事件。但是，当我将鼠标从Some text 1移动到图像时，将触发另一个鼠标悬停事件。如何确保mouseover事件仅触发一次？非常感谢你！

Answer 1

这里发生的是所谓的“事件泡泡”。您只需要在标签上应用mouseover事件。如果在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>

Answer 2

我已经解决了我的问题。我发现使用mouseenter不会出现这种问题。