擴(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)文章
這篇文章主要介紹了jquery對table做排序操作的實例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)輪播圖源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
與大家一起分享8款精美的jQuery圖片播放插件,有興趣的朋友可以下載使用和研究；廢話不多說了，直接上這些插件,希望這些插件對你有所幫助2013-02-02
jQuery EasyUI Layout是一種基于jQuery的布局框架，今天初次使用Jquery EasyUi，簡單的做了個布局頁面感覺還不錯，特此分享腳本之家平臺供大家學(xué)習(xí)2016-01-01
3Z版基于jquery的圖片復(fù)選框(asp.net+jquery)
最近在做一個彩票縮水工具,找了幾個圖片復(fù)選框插件始終感覺不太滿意,自己動手山寨了一下imageTick插件.2010-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
jquery.AutoComplete.js中文修正版(支持firefox)
jquery.AutoComplete.js中文修正版(支持firefox),注意是修正了輸入中文的一些bug,需要的朋友可以測試下。2010-04-04
關(guān)于jQuery的DOM操作面試問題其實有很多，下面這篇文章主要給大家介紹了jQuery常見面試題之DOM操作的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
jquery 彈出層注冊頁面,盡力提高用戶體驗，吸引用戶注冊。2010-06-06
Jquery中使用show()與hide()方法動畫顯示和隱藏圖片
以前我們在js中如果要隱藏顯示一個元素我們需要利用display等于none來設(shè)置并且還沒有效果，現(xiàn)在在jquery中有了hide();我們可以利用hide()方法來操作，希望本文章給大家所有幫助。2015-10-10