mouseover和mouseenter事件之间有什么区别？

Z时代
2024-01-10
分类：问答

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

两者之间有区别吗？如果是，我什么时候应该使用它们？

（也适用于mouseoutvs mouseleave）。

回答：

您可以从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>