鼠标悬停事件和鼠标进入事件之间有什么区别？

javascript jquery events jquery-events

2022-08-30 02:20:34

我一直使用这个事件，但是在阅读jQuery文档时，我发现了。它们的功能似乎完全相同。mouseovermouseenter

两者之间是否有区别，如果是，我什么时候应该使用它们？
（也适用于 vs ）。mouseoutmouseleave

答案 1

您可以从jQuery文档页面尝试以下示例。这是一个很好的小的交互式演示，使它非常清晰，你实际上可以亲眼看到。

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

简而言之，您会注意到，当您在元素上时，鼠标悬停在元素上时会发生该事件 - 来自其子元素或父元素，但仅当鼠标从此元素外部移动到此元素时，才会发生鼠标回车事件。

或者正如 mouseover（） 文档所说：

[.mouseover()]可因事件冒泡而引起许多头痛。例如，当鼠标指针移动到此示例中的 Inner 元素上时，将向该元素发送鼠标悬停事件，然后向上涓涓细流到 Outer。这可能会在不合时宜的时间触发我们的绑定鼠标悬停处理程序。有关有用的替代方法，请参阅讨论。.mouseenter()

答案 2

Mouseenter 和 mouseleave 不会对事件冒泡做出反应，而鼠标悬停和鼠标输出会。

下面是一篇描述该行为的文章。