IE6下focus與blur錯(cuò)亂的解決方案
更新時(shí)間：2011年07月31日 23:16:14 作者：
Miller同學(xué)發(fā)現(xiàn)的IE6 bug：如以下代碼，點(diǎn)擊textarea時(shí)，引發(fā)window的blur，導(dǎo)致focus與blur配對(duì)混亂
復(fù)制代碼 代碼如下:
<body>
<textarea></textarea>
hello
<script>
window.onblur=function(){
document.title= 'blur:' + Math.random() ;
}
window.onfocus=function(){
document.title= 'focus:' + Math.random() ;
}
</script>
</body>
這應(yīng)該是一個(gè)很常見的需求，例如，當(dāng)前窗口定期更新數(shù)據(jù)，而窗口失焦則減少信息更新頻率。IE6的bug導(dǎo)致的配對(duì)混亂卻會(huì)打亂我們的計(jì)劃。
上網(wǎng)查也沒查出關(guān)于這個(gè)bug的官方說明與推薦解決方案，只好自己生更的實(shí)現(xiàn)一個(gè)解決方案。
代碼如下：
復(fù)制代碼 代碼如下:
<body>
<textarea></textarea>
hello
<script>
(function(){
var focusTimer = 0;
function myBlur(){
document.title= 'blur:' + Math.random() ;
}
function myFocus(){
clearTimeout(focusTimer);
focusTimer = setTimeout(function(){
document.title = 'focus:' + Math.random() ;
},10);
}
window.onfocus = document.body.onfocusin = myFocus;
window.onblur = document.body.onfocusout = myBlur;
}());
</script>
</body>
大略原理是：找到很多可能觸發(fā)onfocus與onblur的時(shí)機(jī)，所有的onblur都立即執(zhí)行，而onfocus則延時(shí)10毫秒懶惰執(zhí)行。
結(jié)果是：雖說有時(shí)多執(zhí)行了幾次myFocus與myBlur，但能保證窗口狀態(tài)的正確性。
方法可能有點(diǎn)山寨，不過一時(shí)沒想到更好的辦法，這樣也暫時(shí)能解個(gè)燃眉之急。
相關(guān)文章
詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問題的匯總。2017-11-11
JS利用原生canvas實(shí)現(xiàn)圖形標(biāo)注功能
這篇文章主要為大家詳細(xì)介紹了JS如何利用原生canvas實(shí)現(xiàn)圖形標(biāo)注功能,支持矩形、多邊形、線段、圓形等已繪制的圖形進(jìn)行縮放,移動(dòng),需要的可以參考下2024-03-03
在javascritp中，有兩個(gè)關(guān)于定時(shí)器的專用函數(shù)，下面講解一下兩個(gè)定時(shí)器，有需要的朋友可以參考一下2013-10-10
javascript框架設(shè)計(jì)之瀏覽器的嗅探和特征偵測
這篇文章主要介紹了javascript框架設(shè)計(jì)之瀏覽器的嗅探和特征偵測的相關(guān)資料,需要的朋友可以參考下2015-06-06
layui form表單提交后實(shí)現(xiàn)自動(dòng)刷新
今天小編就為大家分享一篇layui form表單提交后實(shí)現(xiàn)自動(dòng)刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
基數(shù)排序是一種根據(jù)數(shù)字位數(shù)的值,對(duì)整數(shù)進(jìn)行排序的算法,本文主要介紹了JS實(shí)現(xiàn)基數(shù)排序的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript 不只是腳本...2007-05-05
這篇文章主要為大家詳細(xì)分析了Bootstrap部分源代碼，先提供給大家學(xué)習(xí)，感興趣的小伙伴們可以參考一下2016-08-08