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

339 阅读 0 评论 224 点赞

我是靠谱客的博主老实火车，这篇文章主要介绍扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁，现在分享给大家，希望可以做个参考。

解决思路如下：
首先，判断事件的当前节点，也就是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; 
} 