内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我一直使用mouseover事件,但是在阅读jQuery文档时,我找到了mouseenter。它们的作用似乎完全相同。这两者之间有什么区别吗?如果是的话,我应该在什么时候使用它们呢?(也适用于鼠标退出与鼠标退出)
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>
简而言之,会注意到,当您处理一个元素时,鼠标超过事件就会发生-来自它的子元素或父元素,但是只有当鼠标从该元素外部移动到该元素时,才会发生鼠标Enter事件。
.mouseover()
会因事件冒泡而引起许多头痛。例如,当鼠标指针在本例中的内部元素上移动时,将向其发送一个mouseover事件,然后将其传输到外层。这可能会在不合适的时候触发绑定鼠标处理程序。见讨论.mouseenter()
一个有用的替代方案。