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

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

首先，判断事件的当前节点，也就是jquery的currentTarget是否在target的包含中，即下面的扩展$.containsNode。

然后，在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中，即$.fn.fhover扩展

下面就是相关代码：

 

 1     $.containsNode = function(parentNode, childNode) {
 2         if (parentNode.contains) {
 3             return parentNode != childNode && parentNode.contains(childNode);
 4         } else {
 5             return !!(parentNode.compareDocumentPosition(childNode) & 16);
 6         }
 7     }
 8     $.fn.fhover = function(over, out) {
 9         this.hover(function(e) {
10             if ($.containsNode(e.target, e.currentTarget)) {
11                 return;
12             }
13             over.call(this, e);
14         }, function(e) {
15             if ($.containsNode(e.target, e.currentTarget)) {
16                 return;
17             }
18             out.call(this, e);
19         });
20         return this;
21     }

转载于:https://www.cnblogs.com/51lianxi/archive/2011/12/08/2280663.html