我一直使用该mouseover事件,但是在阅读jQuery文档时发现了mouseenter。它们的功能似乎完全相同。
mouseover
mouseenter
两者之间有区别吗?如果是,我什么时候应该使用它们? (也适用于mouseoutvs mouseleave)。
mouseout
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>
简而言之,您会注意到,当鼠标悬停在元素上时,该元素上会发生鼠标悬停事件-来自其子元素或父元素,但是仅当鼠标从该元素外部移至该元素时才会发生鼠标进入事件。
或者如mouseover()文档所述:
mouseover()
.mouseover()会因事件冒泡而引起许多头痛。例如,在此示例中,当鼠标指针移到Inner元素上时,将向该元素发送mouseover事件,然后再向上移动到Outer。这可能会在不合时宜的时候触发绑定的鼠标悬停处理程序。有关.mouseenter()有用的替代方法,请参见讨论。
.mouseover()
.mouseenter()