在我们对一个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 }