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

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

您可以从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 >  <span>move your mouse</span>  <div >  </div></div><div >  <span>move your mouse</span>  <div >  </div></div>

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

或者如

mouseover()

文档所述：

.mouseover()

会因事件冒泡而引起许多头痛。例如，在此示例中，当鼠标指针移到Inner元素上时，将向该元素发送mouseover事件，然后再向上移动到Outer。这可能会在不合时宜的时候触发绑定的鼠标悬停处理程序。有关

.mouseenter()

有用的替代方法，请参见讨论。