`

浅谈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`只在鼠标进入或离开元素本身...

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

    mouseover ,mouseout ,mouseenter,mouseleave,都是鼠标点击而触发的事件,各自代表什么意思,有哪些区别呢?下面跟着脚本之家小编一起看看吧

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

    jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouse...

    javascript中mouseover、mouseout使用详解

    在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法,这两个事件只有ie支持,其他浏览器不支持。 但是我在最新版本的火狐与谷歌都支持了mouseenter 与 mouseleave!!!!! 另外ie是...

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

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

    javascript中mouseenter与mouseover的异同

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

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

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

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

    IE6/7/8对应的是srcElement。currentTarget 指添加事件handler的元素本身,如el....relativeTarget 指事件相关的元素,一般用在mouseover,mouseout事件中。IE6/7/8中对应的是fromElement,toElement。mouseenter ,m

    15jQuery事件.docx

    理解`mouseenter`和`mouseover`,以及`mouseleave`和`mouseout`的区别至关重要。`mouseenter`和`mouseleave`只会在鼠标进入或离开元素本身时触发,而不会因子元素的影响而重复触发。相反,`mouseover`和`mouseout`会...

    关于Jquery的鼠标悬停事件

    除了单独使用这两个事件,jQuery还提供了一个简化的`hover`方法,它可以同时绑定`mouseenter`和`mouseleave`事件。这样可以更方便地在一个语句中处理进入和离开的情况: ```javascript $("#element").hover( ...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会...给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样 代码如下: <!DOC

    jquery常用方法及使用示例汇总

    mouseover事件大多数时候会与 mouseout 事件一起使用。 mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题。 mouseenter()/mouseleave() mouseenter/mouseleave当且仅当...

    jquery鼠标悬停图片翻转效果.zip

    - `mouseenter`和`mouseleave`:这两个事件与`mouseover`和`mouseout`不同,它们不会因子元素而触发。 3. **CSS3变换**: - 图片翻转效果主要依赖于CSS3的`transform`属性,它可以对元素进行旋转、缩放、移动和...

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

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

    比较实用的jquery鼠标感应代码.rar

    这两个事件分别在鼠标进入和离开元素时触发,与JavaScript的`mouseover`和`mouseout`事件有所不同,它们不会因为子元素而误触发。在实际应用中,这可以帮助我们创建更精确的交互效果。 例如,我们可以创建一个简单...

    基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 ...翻阅了一些博客,发现好多都提到了mouse事件,如mouseover、mouseout、mouseenter、mouseleave,在之后我自己也通过这种方法进行了尝试。 xss=removed> label=图片 width=180> <

    jQuery鼠标经过图片背景滑动切换效果.zip

    此外,为了优化性能和用户体验,我们可能需要考虑使用`mouseenter`和`mouseleave`事件代替`mouseover`和`mouseout`。`mouseenter`只会在鼠标首次进入元素时触发,而`mouseleave`则在鼠标离开元素本身时触发,不会...

    jquery鼠标滑过星星打分

    `mouseover`和`mouseout`事件也可以使用,但`mouseenter`和`mouseleave`更稳定,避免了因子元素导致的误触发。 4. **jQuery选择器**: 利用jQuery的选择器选取星星元素,例如:`$('.star')`,然后为每个星星绑定...

Global site tag (gtag.js) - Google Analytics