IE6下focus與blur錯亂的解決方案

 

Miller同學發現的IE6 bug:如以下代碼,點擊textarea時,引發window的blur,導致focus與blur配對混亂:

<body> <textarea></textarea> hello<script> window.onblur=function(){

    document.title= 'blur:' + Math.random() ;

}

window.onfocus=function(){

    document.title= 'focus:' + Math.random() ;

}</script> </body>

這應該是一個很常見的需求,例如,當前窗口定期更新數據,而窗口失焦則減少信息更新頻率。IE6的bug導致的配對混亂卻會打亂我們的計劃。

上網查也沒查出關於這個bug的官方說明也推薦解決方案,隻好自己生更的實現一個解決方案。

代碼如下:Venus'Blog

<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>

大略原理是:找到很多可能觸發onfocus與onblur的時機,所有的onblur都立即執行,而onfocus則延時10毫秒懶惰執行。

結果是:雖說有時多執行瞭幾次myFocus與myBlur,但能保證窗口狀態的正確性。Venus'Blog

方法可能有點山寨,不過一時沒想到更好的辦法,這樣也暫時能解個燃眉之急。

You May Also Like