扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
发布时间：2013-06-08 编辑：jiaochengji.com
在我们对一个dom添加mouseover和mouseout时，也就是jquery的hover事件，如果该dom有子元素，鼠标移到子元素时会触发mouseout事件，但往往实际情况我们希望在子元素上不触发out事件
在我们对一个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的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插件处理mouseover时内部有子元素时发生样式闪烁
jquery常用技巧及常用方法列表集合
Photoshop闪烁霓虹海报图片制作教程一览
总结：制作网页写CSS时参考的内容
jQuery设计思想完整篇
jquery中常用的函数和属性详细解析
jQuery 方法大全方便学习参考
JQuery 常用方法基础教程
jQuery插件教程
jQuery的运行机制和设计理念分析
上一篇：JQuery循环滚动图片代码
下一篇：基于jquery的代码显示区域自动拉长效果
[关闭]