有些時候我們需要在項目中判斷用戶是否在瀏覽當前頁面，或者當前頁面是否處于激活狀態(tài)。然后再進行相關(guān)的操作。瀏覽器中可通過window對象的onblur、onfocus判斷，或者document的hidden屬性判斷。

1、window.onblur & window.onfocus
關(guān)于是否失焦點，瀏覽器對象有onfocus 和 onblur事件可以監(jiān)聽。但是觸發(fā)這兩個事件的前提是頁面之前是focus過的。也就是說頁面剛剛渲染完，用戶在沒有頁面上任何操作時，頁面是不會正常監(jiān)聽這兩個事件的；或者頁面在打開狀態(tài)下，但是觸發(fā)了onblur之后并無頁面操作的情況下也不會正常監(jiān)聽這兩個事件。直到，用戶操作頁面觸發(fā)focus，之后離開頁面才會觸發(fā)blur，再次點擊到當前頁面時才會觸發(fā)focus，如此反復(fù)都會觸發(fā)相應(yīng)的事件。

觸發(fā)onblur事件的情況：
1、在chrome瀏覽器下，點擊console面板也會觸發(fā)blur事件，同樣的，前提是之前是focus的狀態(tài)。
2、頁面最小化；
3、瀏覽器切換tab頁面；
4、頁面中的任何彈窗；
5、focus狀態(tài)下切換到其他應(yīng)用

觸發(fā)onfocus的情況：
1、用戶存在頁面操作（包括頁面中js腳本運行。如頁面加載完無js運行，用戶無操作，則不會觸發(fā) ）；
2、onblur事件觸發(fā)前提下，頁面最大化；
3、onblur事件觸發(fā)前提下，頁面 從其他tab頁切換回當前頁面；

2、document.hidden
hidden是document的屬性，可以判斷頁面是否顯示的是當前的頁面。visibilitychange事件就是觸發(fā)頁面可見的事件。當然不同的瀏覽器內(nèi)核記得要加前綴。表示頁面處于非激活狀態(tài)，反之，處于激活狀態(tài)。

hidden屬性為true的此類情況有：
1、 頁面最小化
2、頁面在后臺運行
3、切換tab欄到其他頁面

hidden屬性為false的情況


###visibilitychange事件的兼容性寫法
var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('頁面激活');
    }else{
        console.log('頁面非激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

這兩種判斷方法最大的不同就是在頁面被其他應(yīng)用覆蓋的情況下，onblur是會觸發(fā)的，但是visibilitychange不會觸發(fā)。如果只是判斷頁面是否是打開狀態(tài)的話，visibilitychange事件是比較合適的。

原文 https://www.cnblogs.com/csuwujing/p/10315309.html