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