扩展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;

  }