在我們對(duì)一個(gè)dom添加mouseover和mouseout時(shí)，也就是jquery的hover事件，如果該dom有子元素，鼠標(biāo)移到子元素時(shí)會(huì)觸發(fā)mouseout事件，但往往實(shí)際情況我們希望在子元素上不觸發(fā)out事件，解決思路如下：

首先，判斷事件的當(dāng)前節(jié)點(diǎn)，也就是jquery的currentTarget是否在target的包含中，即下面的擴(kuò)展$.containsNode。

然后，在調(diào)用hover的時(shí)候的mouseover和mouseout事件里判斷currentTarget是否在target的包含中，即$.fn.fhover擴(kuò)展

下面就是相關(guān)代碼：

?

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 }

轉(zhuǎn)載于:https://www.cnblogs.com/51lianxi/archive/2011/12/08/2280663.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。