擴(kuò)展Jquery插件處理mouseover時內(nèi)部有子元素時發(fā)生樣式閃爍
更新時間：2011年12月08日 23:07:22 作者：
在我們對一個dom添加mouseover和mouseout時，也就是jquery的hover事件，如果該dom有子元素，鼠標(biāo)移到子元素時會觸發(fā)mouseout事件，但往往實際情況我們希望在子元素上不觸發(fā)out事件
解決思路如下：
首先，判斷事件的當(dāng)前節(jié)點，也就是jquery的currentTarget是否在target的包含中，即下面的擴(kuò)展$.containsNode。
然后，在調(diào)用hover的時候的mouseover和mouseout事件里判斷currentTarget是否在target的包含中，即$.fn.fhover擴(kuò)展
下面就是相關(guān)代碼：
$.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;
}
首先，判斷事件的當(dāng)前節(jié)點，也就是jquery的currentTarget是否在target的包含中，即下面的擴(kuò)展$.containsNode。
然后，在調(diào)用hover的時候的mouseover和mouseout事件里判斷currentTarget是否在target的包含中，即$.fn.fhover擴(kuò)展
下面就是相關(guān)代碼：
復(fù)制代碼 代碼如下:
$.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;
}
您可能感興趣的文章:
- jQuery插件formValidator自定義函數(shù)擴(kuò)展功能實例詳解
- jQuery插件kinMaxShow擴(kuò)展效果用法實例
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗證
- JQuery擴(kuò)展插件Validate—4設(shè)置錯誤提示的樣式
- JQuery擴(kuò)展插件Validate 3通過參數(shù)設(shè)置錯誤信息
- JQuery擴(kuò)展插件Validate 2通過參數(shù)設(shè)置驗證規(guī)則
- JQuery擴(kuò)展插件Validate 1 基本使用方法并打包下載
- JQuery擴(kuò)展插件Validate 5添加自定義驗證方法
- jQuery autocomplate 自擴(kuò)展插件、自動完成示例代碼
- boxy基于jquery的彈出層對話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- jQuery插件擴(kuò)展測試實例
相關(guān)文章
一步步教大家編寫酷炫的導(dǎo)航欄js+css實現(xiàn)
一步步教大家編寫酷炫的導(dǎo)航欄，js+css實現(xiàn)黑色經(jīng)典導(dǎo)航欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
jquery multiSelect 多選下拉框?qū)崿F(xiàn)挨罵2010-07-07
得到j(luò)Query detach()后節(jié)點中的某個值實現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個值，如何獲取到呢？一直困惑著我們，不過本文將為大家解開疑惑，感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
最近在學(xué)習(xí)JQuery，其實也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時間沒用，有些生疏了，于是就做幾個小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來2012-09-09
jQuery插件bgStretcher.js實現(xiàn)全屏背景特效
可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調(diào)用代碼也非常簡單。2015-06-06
本篇文章介紹了，在jquery中.add()的使用分析。需要的朋友參考下2013-04-04
統(tǒng)計jQuery中各字符串出現(xiàn)次數(shù)的工具
如果使用一個變量替換，使用工具壓縮時將會進(jìn)一步減少文件的大小2012-05-05
jQuery獲取table下某一行某一列的值實現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了高效Web開發(fā)的10個jQuery代碼片段，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-07-07
解決jQuery uploadify在非IE核心瀏覽器下無法上傳
之前上傳了一個通過Flash實現(xiàn)多文件上傳，但是在IE正常運行，F(xiàn)ireFox 不能正常上傳。經(jīng)過反復(fù)研究學(xué)習(xí)，之所以firefox和360瀏覽器無法正常運行，是因為FireFox、chrome、360瀏覽器等支持HTML5的瀏覽器不會再文件上傳時自動帶入session信息和cookie，不共享session。2015-08-08