何时选择 mouseover() 和 hover() 函数？

Posted 2023-02-19

【中文标题】何时选择 mouseover() 和 hover() 函数？

【英文标题】：When to choose mouseover() and hover() function?

【发布时间】：2013-07-09 11:47:30

【问题描述】：

jQuery .mouseover() 和 .hover() 函数有什么区别？如果它们完全一样，为什么 jQuery 会同时使用它们？

【问题讨论】：

这不是重复的问题。您提供的链接有 mouseover 和 mouseenter 事件，但我的是 mouseover 和 hover 事件。

它们与 mouseover nad mouseleave 相同，并且下面接受的答案不准确...悬停功能添加 mouseenter 和 mouseleve 事件而不是 mouseover 和 mouseout 事件

参见jsfiddle.net/arunpjohny/cZb5b/1 将鼠标从el 元素移动到child 并检查控制台

@ArunPJohny 请重新阅读，即 mouseenter 和 mouseleave 不是 mouseover 和 mouseout。

还有hover - jsfiddle.net/arunpjohny/cZb5b/2如果你能分析一下控制台，你就能找到区别...

【参考方案1】：

来自官方 jQuery 文档

.mouseover() 将事件处理程序绑定到“鼠标悬停”javascript 事件或触发器 元素上的那个事件。

---

.hover()绑定一两个处理程序 到匹配的元素，当鼠标指针被执行时 进入和离开元素。

调用$(selector).hover(handlerIn, handlerOut) 是以下的简写： $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

---

.mouseenter()

绑定一个事件处理程序，当鼠标进入一个元素时触发， 或在元素上触发该处理程序。

mouseover 在指针移入子元素时触发 好吧，而 mouseenter 仅在指针移动到 绑定元素。

---

这是什么意思

因此，.mouseover()不与 .hover() 相同，同样，.mouseover()不与.mouseenter() 相同。

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function) 

【参考方案2】：

.hover() 函数接受两个函数参数，一个用于mouseenter 事件，一个用于mouseleave 事件。

【讨论】：

就问题标题中提到的两个功能之间的差异而言，这是一个很好的观点，谢谢！查看 w3schools 上的以下链接，了解 .hover() 的工作原理：w3schools.com/jquery/event_hover.asp

【参考方案3】：

您可以在 jQuery 文档页面上试用 http://api.jquery.com/mouseover/。这是一个不错的小型交互式演示，它非常清晰，您可以亲自看到。

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

【参考方案4】：

来自官方文档：(http://api.jquery.com/hover/)

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。您可以使用它在鼠标位于元素内时简单地将行为应用于元素。

【参考方案5】：

如您所见，http://api.jquery.com/mouseenter/

mouseenter JavaScript 事件是 Internet Explorer 专有的。 由于事件的通用性，jQuery 模拟了这个事件，所以 无论浏览器如何，它都可以使用。该事件被发送到 鼠标指针进入元素时的元素。任何 html 元素 可以接收这个事件。