扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

更新时间：2011年12月08日 23:07:22 作者：

在我们对一个dom添加mouseover和mouseout时，也就是jquery的hover事件，如果该dom有子元素，鼠标移到子元素时会触发mouseout事件，但往往实际情况我们希望在子元素上不触发out事件

解决思路如下：
首先，判断事件的当前节点，也就是jquery的currentTarget是否在target的包含中，即下面的扩展$.containsNode。
然后，在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中，即$.fn.fhover扩展
下面就是相关代码：

复制代码代码如下:

 
$.containsNode = function(parentNode, childNode) { 
if (parentNode.contains) { 
return parentNode != childNode && parentNode.contains(childNode); 
} else { 
return !!(parentNode.compareDocumentPosition(childNode) & 16); 
} 
} 
$.fn.fhover = function(over, out) { 
this.hover(function(e) { 
if ($.containsNode(e.target, e.currentTarget)) { 
return; 
} 
over.call(this, e); 
}, function(e) { 
if ($.containsNode(e.target, e.currentTarget)) { 
return; 
} 
out.call(this, e); 
}); 
return this; 
} 

您可能感兴趣的文章:

jquery对table做排序操作的实例演示
这篇文章主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下
2017-08-08
jQuery实现轮播图源码
这篇文章主要为大家详细介绍了jQuery实现轮播图源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
jQuery图片播放8款精美插件分享
与大家一起分享8款精美的jQuery图片播放插件,有兴趣的朋友可以下载使用和研究；废话不多说了，直接上这些插件,希望这些插件对你有所帮助
2013-02-02
jQuery EasyUi实战教程之布局篇
jQuery EasyUI Layout是一种基于jQuery的布局框架，今天初次使用Jquery EasyUi，简单的做了个布局页面感觉还不错，特此分享脚本之家平台供大家学习
2016-01-01
3Z版基于jquery的图片复选框(asp.net+jquery)
最近在做一个彩票缩水工具,找了几个图片复选框插件始终感觉不太满意,自己动手山寨了一下imageTick插件.
2010-04-04
jQuery实现简单弹幕效果
这篇文章主要为大家详细介绍了jQuery实现简单弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
jquery.AutoComplete.js中文修正版(支持firefox)
jquery.AutoComplete.js中文修正版(支持firefox),注意是修正了输入中文的一些bug,需要的朋友可以测试下。
2010-04-04
jQuery常见面试题之DOM操作详析
关于jQuery的DOM操作面试问题其实有很多，下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
jquery 弹出层注册页面等(asp.net后台)
jquery 弹出层注册页面,尽力提高用户体验，吸引用户注册。
2010-06-06
Jquery中使用show()与hide()方法动画显示和隐藏图片
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果，现在在jquery中有了hide();我们可以利用hide()方法来操作，希望本文章给大家所有帮助。
2015-10-10