IE之動(dòng)態(tài)添加DOM節(jié)點(diǎn)觸發(fā)window.resize事件
更新時(shí)間：2010年07月27日 09:13:33 作者：
因?yàn)轫撁婧芏郩I是絕對定位的,所以當(dāng)窗口大小改變的時(shí)候會(huì)使原先的布局混亂,只好在每次window.resize的時(shí)候重新布局...
然后頁面有幾個(gè)事件是動(dòng)態(tài)地增加DOM元素的,比如點(diǎn)擊某個(gè)層會(huì)在底下列出該層詳細(xì)內(nèi)容,這樣在FF和chrome下沒出現(xiàn)問題,但是在IE6-8下每次都重布局了.
比如我拖動(dòng)一個(gè)層,在拖動(dòng)過程中層的內(nèi)容又顯示在最底下了,當(dāng)我放開層的時(shí)候這個(gè)層就跳回拖動(dòng)前的位置了...
起先我還沒看出來是重布局了...然后演示了N久,掙扎了N久,終于覺得可能是由于動(dòng)態(tài)增加DOM節(jié)點(diǎn)導(dǎo)致觸發(fā)window.resize而使頁面重布局了...
最后我不由地在心里喊了句"Thank godness....",還好改變窗口的高度對頁面布局沒有影響,不然真要麻煩死了...
bindResizeWindow:function(){
var obj = this;
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth == obj.windowWidth){return;}
obj.initUI();
obj.createUI();
obj.windowWidth = newWidth;
});
},
只要在綁定方法中判只有寬度改變時(shí)才觸發(fā)重布局事件就行了...
比如我拖動(dòng)一個(gè)層,在拖動(dòng)過程中層的內(nèi)容又顯示在最底下了,當(dāng)我放開層的時(shí)候這個(gè)層就跳回拖動(dòng)前的位置了...
起先我還沒看出來是重布局了...然后演示了N久,掙扎了N久,終于覺得可能是由于動(dòng)態(tài)增加DOM節(jié)點(diǎn)導(dǎo)致觸發(fā)window.resize而使頁面重布局了...
最后我不由地在心里喊了句"Thank godness....",還好改變窗口的高度對頁面布局沒有影響,不然真要麻煩死了...
復(fù)制代碼 代碼如下:
bindResizeWindow:function(){
var obj = this;
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth == obj.windowWidth){return;}
obj.initUI();
obj.createUI();
obj.windowWidth = newWidth;
});
},
只要在綁定方法中判只有寬度改變時(shí)才觸發(fā)重布局事件就行了...
您可能感興趣的文章:
- 一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
- JQuery為頁面Dom元素綁定事件及解除綁定方法
- JavaScript DOM 添加事件
- javascript 刪除dom對象的事件函數(shù)代碼
- Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- Google Map V3 綁定氣泡窗口(infowindow)Dom事件實(shí)現(xiàn)代碼
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用
- jquerydom對象的事件隱藏顯示和對象數(shù)組示例
- DOM中事件處理概覽與原理的全面解析
相關(guān)文章
這篇文章主要介紹了微信小程序城市選擇及搜索功能的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Javascript中call的兩種用法實(shí)例，有需要的朋友可以參考一下2013-12-12
微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
es6 super關(guān)鍵字的理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了es6 super關(guān)鍵字的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 super關(guān)鍵字的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
8種現(xiàn)代JavaScript響應(yīng)式模式小結(jié)
響應(yīng)式的本質(zhì)是關(guān)于系統(tǒng)如何對數(shù)據(jù)變化做出反應(yīng),并且存在不同類型的響應(yīng)式,本文就來介紹8種現(xiàn)代JavaScript響應(yīng)式模式小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了js中如何對json數(shù)組進(jìn)行排序的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
有這么一個(gè)需求，開發(fā)了一套系統(tǒng)，當(dāng)用戶離開桌面或者一段時(shí)間不操作的話，需要把該系統(tǒng)所有打開頁面鎖定起來，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-06-06
JavaScript判斷變量名是否存在數(shù)組中的實(shí)例
下面小編就為大家分享一篇JavaScript判斷變量名是否存在數(shù)組中的實(shí)例，具有很的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)前端分頁和后端分頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08