`

浅谈jQuery的hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

阅读更多

【前言】

      今天在网上看到一种说法,感觉有点问题,于是去jquery源码库查看了下,发现说法有误,这里记录指正下。如有误解望指正

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

 

【主体】

查看jQuery源码

(1)3.3.1版本

jQuery.fn.extend( {
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}
} );

 

(2)1.6.3版本

hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}

 

【总结】

      验证后发现hover事件等效于mouseenter和mouseleave,与版本无关

.

分享到:
评论

相关推荐

    为非IE浏览器添加mouseenter,mouseleave事件

    `mouseenter`和`mouseleave`事件与`mouseover`和`mouseout`类似,但有一些关键的区别。`mouseover`和`mouseout`在鼠标进入或离开元素及其子元素时都会触发,而`mouseenter`和`mouseleave`只在鼠标进入或离开元素本身...

    jQuery中hover与mouseover和mouseout的区别分析

    在jQuery中,hover方法的内部实现实际上是使用了mouseenter和mouseleave方法,这一点在jQuery的源码中可以找到如下定义: ```javascript hover: function(fnOver, fnOut) { return this.mouseenter(fnOver)....

    关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    `mouseover`, `mouseout`, `mouseenter`, 和 `mouseleave` 是四个常见的鼠标事件,它们都与鼠标的移动有关,但触发条件有所不同。理解这些事件的区别对于编写无闪烁、响应良好的用户界面至关重要。 1. `mouseover` ...

    JS中mouseover和mouseout多次触发问题如何解决

    针对标题“JS中mouseover和mouseout多次触发问题如何解决”,主要内容探讨的是在JavaScript中使用jQuery库时,处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时,这些...

    经过绑定元素时会多次触发mouseover和mouseout事件

    `mouseover` 和 `mouseout` 在特定场景下仍可使用,但在有嵌套元素的情况下,优先考虑使用 `mouseenter` 和 `mouseleave` 或 `hover()`。同时,要注意它们的边界条件,以确保在所有情况下都能正确响应用户的交互。...

    javascript中mouseover、mouseout使用详解

    1. 使用mouseenter和mouseleave事件替代mouseover和mouseout。这些事件由IE浏览器首先提出,而后被最新版本的其他主流浏览器支持。mouseenter事件只在鼠标指针进入元素内部时触发一次,而mouseleave事件则在鼠标指针...

    实例讲解jquery中mouseleave和mouseout的区别

    为了解决这些问题,jQuery引入了mouseenter和mouseleave两个新的事件,它们与mouseout事件有很大区别,这一点非常重要,尤其是当我们希望精确控制鼠标事件行为时。 让我们来详细区分一下mouseleave和mouseout事件:...

    jQuery用unbind方法去掉hover事件及其他方法介绍

    而对于使用了jQuery1.7及以后版本的用户,可以使用mouseenter和mouseleave来代替mouseover和mouseout,因为这两个事件更符合DOM事件的标准,可以提供更精确的控制。解绑事件对于维护事件管理的清晰性和应用的性能...

    跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

    由于mouseenter和mouseleave在非IE浏览器中不被支持,我们需要使用mouseover和mouseout来模拟这些事件,并通过compareDocumentPosition方法判断鼠标是否在目标元素内。在非IE浏览器中,compareDocumentPosition是一...

    为非IE浏览器添加mouseenter,mouseleave事件的实现代码

    `mouseenter`和`mouseover`事件的区别在于,`mouseenter`事件不会在事件源元素的子元素之间移动时触发,而`mouseover`则会在任何鼠标移动到该元素的子元素时触发。这意味着`mouseenter`只在鼠标首次进入元素时触发一...

    javascript中mouseenter与mouseover的异同

    不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...

    鼠标经过子元素触发mouseout,mouseover事件的解决方案

    这两个事件与`mouseover`和`mouseout`类似,但它们不会受子元素的影响。`mouseenter`仅在鼠标首次进入元素时触发,而`mouseleave`则在鼠标离开元素自身时触发,不会因为子元素而被反复触发。因此,使用`mouseenter`...

    jquery中取消和绑定hover事件的实现代码

    在使用jQuery进行网页交互设计时,`hover`事件的使用十分频繁,它通常用于模拟`mouseover`和`mouseout`事件的效果。然而,jQuery中对于`hover`事件的绑定和取消有一定的特殊性,这主要体现在事件处理和取消绑定的...

    判断mouseenter事件鼠标从哪个方向进入

    这两个事件是DOM级别的,与`mouseover`和`mouseout`不同,它们不会因为子元素的存在而被错误触发。当鼠标进入一个元素或离开一个元素时,这两个事件会被精确地触发。 要判断鼠标进入元素的方向,我们通常需要记录...

Global site tag (gtag.js) - Google Analytics