为什么$（document）.blur（）和$（document）.focus（）不适用于Safari或Chrome？ [英] Why is $(document).blur() and $(document).focus() not working with Safari or Chrome?

问题描述

我正在制作一个计数器，在文件焦点时倒计数。它在模糊时停止倒计时。

它在FF中工作，但对于Safari和Chrome，计数器根本不起作用。

Safari / Chrome是否存在兼容性问题？

我使用的是 $（document ）.blur（）和 $（document）.focus（），并且在 $（document ）.ready（）块。

  var tm; 
 $（document）.ready（function（）{
 
 var seconds = 50; 
 $（'＃timer'）。html（seconds）; 
 countdown （）; 
 $ b $（window）.focus（function（）{
 function countdown（）{
 if（seconds> 0）{
 seconds-- ; 
 $（'＃timer'）。text（seconds）; 
 tm = setTimeout（countdown，1000）; 
} 
 if（seconds< = 0）{
 $（'＃timer'）。text（'Go'）; 
} 
}）; 
 
 
 
 $（窗口）。 text（seconds）; 
 
}）; $（$） b $ b}）; 
  

解决方案

我一直使用 $（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）; 
 
 
 $ b $（$）
 $（'＃timer'）。html（seconds）; 
 countdown（）; 
 $ b $（window）.focus（function（）{
 if（！inFocus）{
 countdown（）; 
} 
}）; 
 $ b $（窗口）.blur（函数（）{
 inFocus = false; 
 clearTimeout（tm）; 
秒++; 
 $（'＃timer' ）.text（seconds）; 
}）; 
}）; 
  

I am making a counter which counts down when document is on focus. It stops counting down when it's on blur.

It is working in FF, but with Safari and Chrome, the counter doesn't work at all.

Is there a compatibility problem with Safari/Chrome?

All I'm using is $(document).blur() and $(document).focus(), and there are both within a $(document).ready() block.

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

    });
});

解决方案

I've always used $(window).focus() and $(window).blur(). Try these instead.

Also, note that in FF and IE the "focus" event fires on ~document load, while in Chrome and Safari it only fires if the window had lost focus before and now it has regained it.

UPD: Now as you pasted your code, I reworked it to (hopefully) fit your purpose:

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);
    });
});

这篇关于为什么$（document）.blur（）和$（document）.focus（）不适用于Safari或Chrome？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！