在我們對一個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

總結

以上是生活随笔為你收集整理的扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。