爲什麼$（document）.blur（）和$（document）.focus（）不適用於Safari或Chrome？

Question

我正在製作一個計數器，它在文檔聚焦時倒計時。它在模糊時停止倒計時。

它在FF中工作，但在Safari和Chrome中，計數器根本不工作。

Safari/Chrome是否存在兼容性問題？

我所用的全部是$(document).blur()和$(document).focus()，並且在$(document).ready()塊內都有。

var tm; 
$(document).ready(function(){ 

     var seconds = 50; 
     $('#timer').html(seconds); 
     countdown(); 

    $(window).focus(function(){ 
     function countdown(){ 
     if (seconds > 0) { 
      seconds--; 
      $('#timer').text(seconds); 
      tm = setTimeout(countdown,1000); 
      } 
     if (seconds<=0){ 
      $('#timer').text('Go'); 
      } 
     }); 



    $(window).blur(function(){ 
     clearTimeout(tm); 
     seconds++; 
     $('#timer').text(seconds); 

    }); 
}); 

Answer 1

我一直使用$(window).focus()和$(window).blur()。改爲嘗試這些。另外，請注意，在FF和IE中，「焦點」事件觸發〜文檔加載，而在Chrome和Safari中，只有在窗口失去焦點並現在重新獲得焦點時纔會觸發。

UPD：現在你粘貼你的代碼，我把它改造，以（希望）適合你的目的：

var tm; 
var seconds = 50; 
var inFocus = true; 

function countdown() { 
    if (seconds > 0) { 
     seconds--; 
    } 

    if (seconds <= 0) { 
     $('#timer').text('Go'); 
    } 
    else { 
     $('#timer').text(seconds); 
     tm = setTimeout(countdown, 1000); 
    } 
} 

$(function() { 
    $('#timer').html(seconds); 
    countdown(); 

    $(window).focus(function() { 
     if(!inFocus) { 
      countdown(); 
     } 
    }); 

    $(window).blur(function() { 
     inFocus = false; 
     clearTimeout(tm); 
     seconds++; 
     $('#timer').text(seconds); 
    }); 
});