When to choose mouseover() and hover() function?

JQuery.mouseover().hover()函数之间有什么区别? 如果它们完全相同,为什么 jQuery 同时使用这两个函数?

127113 次浏览

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

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

那个。Hover ()方法绑定 mouseenter 和 mouseleave 事件的处理程序。您可以使用它在鼠标位于元素中期间简单地将行为应用于元素。

正如你可以在 http://api.jquery.com/mouseenter/阅读

Mouseenter JavaScript 事件是 Internet Explorer 专有的。 由于事件的通用实用程序,jQuery 模拟这个事件 无论浏览器如何都可以使用。此事件被发送到 当鼠标指针进入元素时。任何 HTML 元素 可以接收到这个事件。

来自官方的 jQuery 文档

  • .mouseover()
    将事件处理程序绑定到“ mouseover”JavaScript 事件或触发器 元素上的事件。


  • .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)

您可以在 jQuery 文档页面上尝试使用 http://api.jquery.com/mouseover/。这是一个不错的小型互动演示,非常清晰,你可以亲眼看到。

简而言之,您将注意到当您在一个元素上时,该元素上的鼠标进入事件发生在该元素上——来自该元素的子元素或父元素,但是鼠标进入事件只有在鼠标从父元素移动到该元素时才会发生。