了解 Mouseover 和 Mouseenter 事件之间的区别

mouseover 和 mouseenter 事件都响应鼠标光标在元素上的移动。然而，它们之间有一个微妙的区别。

Mouseover

每次鼠标光标进入或在元素（包括后代）的边界内移动时，都会触发 mouseover 事件元素。这意味着，如果您将鼠标光标移动到嵌套在主元素中的子元素上，则主元素仍会触发 mouseover 事件。

Mouseenter

相反，mouseenter事件仅在鼠标光标第一次进入元素的边界时触发，不包括后代元素。如果您在元素内或子元素上移动光标，则不会再次触发 mouseenter 事件。

何时使用每个事件

使用之间的选择mouseover 和 mouseenter 取决于您的具体要求：

• 当您希望每次光标在元素或其后代的边界内移动时触发事件时，请使用 mouseover。这对于突出显示元素或显示工具提示等任务很有用。
• 当您希望仅在光标最初进入元素时触发事件时，请使用 mouseenter。这可用于跟踪用户交互，例如当用户将鼠标悬停在导航菜单项上时。

示例

考虑以下代码：

$("div.overout")
  .mouseover(function() {
    // Event triggered for mouseover and within the nested element
  })
  .mouseout(function() {
    // Event triggered when mouse leaves the main element
  });

$("div.enterleave")
  .mouseenter(function() {
    // Event triggered only when mouse enters the main element
  })
  .mouseleave(function() {
    // Event triggered when mouse leaves the main element
  });

在此示例中，每次鼠标光标在“div.overout”元素或其嵌套元素内移动时，都会触发 mouseover 事件。另一方面，只有当光标第一次进入“div.enterleave”元素时才会触发 mouseenter 事件。