jQuery 什么时候选择 mouseover() 和 hover() 函数?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17589420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:21:38  来源:igfitidea点击:

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

jquerymouseevent

提问by Bhojendra Rauniyar

What are the differences between jQuery .mouseover()and .hover()functions? If they are totally same why jQuery uses both?

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

回答by Navin Rauniyar

From the official jQuery documentation

来自 jQuery 官方文档

  • .mouseover()
    Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
  • .mouseover()
    将事件处理程序绑定到“鼠标悬停”JavaScript 事件,或在元素上触发该事件。


  • .hover()Bind one or two handlers to the matched elements, to be executed when the mouse pointer entersand leavesthe elements.

    Calling $(selector).hover(handlerIn, handlerOut)is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .hover()将一两个处理程序绑定到匹配的元素,在鼠标指针 进入离开元素时执行。

    Calling$(selector).hover(handlerIn, handlerOut)是以下的简写: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);



  • .mouseenter()

    Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

    mouseoverfires when the pointer moves into the child element as well, while mouseenterfires only when the pointer moves into the bound element.

  • .mouseenter()

    绑定要在鼠标进入元素时触发的事件处理程序,或在元素上触发该处理程序。

    mouseover当指针移入子元素时mouseenter触发,而仅当指针移入绑定元素时触发。



What this means

这意味着什么

Because of this, .mouseover()is notthe same as .hover(), for the same reason .mouseover()is notthe same as .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) 

回答by mishik

.hover()function accepts two function arguments, one for mouseenterevent and one for mouseleaveevent.

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

回答by Shivaji Ranaware

You can try it out http://api.jquery.com/mouseover/on the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.

您可以在 jQuery 文档页面上尝试http://api.jquery.com/mouseover/。这是一个很好的小型交互式演示,它非常清晰,您可以亲眼目睹。

In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from the parent element to the element.

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

回答by Wottensprels

From the offical docs: (http://api.jquery.com/hover/)

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

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

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

回答by Edorka

As you can read at http://api.jquery.com/mouseenter/

正如您可以在http://api.jquery.com/mouseenter/ 上阅读的那样

The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

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