jQuery 的 hover 方法等同于 mouseenter + mouseleave 方法
2011-12-28 11:33
337 查看
文章来源: http://www.36ria.com/1756
jQuery中的hover方法是个非常常用的方法,接受二个参数,第一个参数为鼠标移入对象时触发的事件,第二个参数为鼠标移出对象时触发的事件。
很多人误以为hover()是mouserover和mouseout的结合体,实际上不是。
hover = mouseenter+mouseleave
mouseenter和mouseleave这二个事件,jquery新手应该会觉得很陌生,实际上它实现的功能和mouserover和mouseout是极为类似的,那为什么会出现这二个事件,而不使用mouserover和mouseout呢?
这就要从mouseout的诡异bug说起了,mouseout会在你离开子元素的时候就把事件冒泡到父元素上,也就是说不管你的鼠标是否还在父元素中,只要你一离开子元素,就会触发mouseout。
这说法非常的抽象,来看demo:
例子的代码非常简单,这里就不再累述,重点说明下最后一个例子的写法:
留意了,这里的hover只有一个参数,也就是只有移入事件,但同样实现了移入和移出。那是如何实现的呢?
非常关键的一个属性:this.check
大家可以使用alert(this.check )试下,非常有意思,奇数为移入,而偶数为移出,但注意第一次移入为undefined,所以才需要this.check = this.check || 1;当this.check不存在时赋值1
jQuery中的hover方法是个非常常用的方法,接受二个参数,第一个参数为鼠标移入对象时触发的事件,第二个参数为鼠标移出对象时触发的事件。
很多人误以为hover()是mouserover和mouseout的结合体,实际上不是。
hover = mouseenter+mouseleave
mouseenter和mouseleave这二个事件,jquery新手应该会觉得很陌生,实际上它实现的功能和mouserover和mouseout是极为类似的,那为什么会出现这二个事件,而不使用mouserover和mouseout呢?
这就要从mouseout的诡异bug说起了,mouseout会在你离开子元素的时候就把事件冒泡到父元素上,也就是说不管你的鼠标是否还在父元素中,只要你一离开子元素,就会触发mouseout。
这说法非常的抽象,来看demo:
http://www.36ria.com/demo/hover/demo.html
尤其看下第三个关于mouseout的示例,你就会发现这个问题的所在。例子的代码非常简单,这里就不再累述,重点说明下最后一个例子的写法:
$('.selectorClass4').hover(function(){ this.check = this.check || 1; $(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4); });
留意了,这里的hover只有一个参数,也就是只有移入事件,但同样实现了移入和移出。那是如何实现的呢?
非常关键的一个属性:this.check
大家可以使用alert(this.check )试下,非常有意思,奇数为移入,而偶数为移出,但注意第一次移入为undefined,所以才需要this.check = this.check || 1;当this.check不存在时赋值1
相关文章推荐
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
- hover!= mouseover+mouseout。但hover=mouseenter + mouseleave
- hover!= mouseover+mouseout。但hover=mouseenter + mouseleave
- B1. mouseover/mouseout和mouseenter/mouseleave和hover
- jQuery mouseenter与mouseleave 方法原理
- jquery的mouseover/mouseleave和mouseenter/mouseout区别,横向多级滑动菜单
- 关于jquery mouseenter/mouseleave在 IE中不起作用的问题
- jquery合成事件hover(enter,leave
- 【WIN32之旅】给托盘图标加上MOUSE_ENTER、MOUSE_HOVER、MOUSE_LEAVE消息
- jquery合成事件hover(enter,leave
- jQuery实现hover合成事件的方法
- JQuery中使用on方法绑定hover事件实例
- jQuery用unbind方法去掉hover事件及其他方法介绍
- 按Enter键触发事件的jquery方法 .
- jquery中trigger()无法触发hover事件的解决方法
- 鼠标移入和移出事件mouseenter VS mouseover 、mouseleave VS mouseout
- mouseover/out和mouseenter/leave的区别及用法
- Jquery hover方法的效果延时处理
- 线程锁的概念函数EnterCriticalSection和LeaveCriticalSection的使用方法