为什么 $(document).blur() 和 $(document).focus() 不适用于 Safari 或 Chrome?

2024-02-01

我正在制作一个计数器,当文档聚焦时它会倒计时。当它处于模糊状态时,它会停止倒计时。

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

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

我所使用的是$(document).blur() and $(document).focus(),并且两者都在一个$(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);

    });
});

我一直用$(window).focus() and $(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);
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 $(document).blur() 和 $(document).focus() 不适用于 Safari 或 Chrome? 的相关文章

  • Google 闭包编译器使用 WebStorm

    我喜欢用谷歌闭包编译器 https developers google com closure compiler in WebStorm https www jetbrains com webstorm 我已经通过 npm 下载了它 npm
  • Angularjs 使用 ng-init 为 ng-model 赋值

    您好 我有以下问题 看起来很简单并且应该有效 但事实并非如此 在我的代码中我输入了
  • 按周将对象数组拆分为组

    我有一个包含这样的数据的对象数组 date 01 01 2017 00 00 00 dataField1 dataField2 date 01 02 2017 00 00 00 dataField1 dataField2 date 01 1
  • pointdown 与 onclick:有什么区别?

    两者有什么区别onpointerdown and onclick事件处理程序 有任何实际差异吗 事件在 DOM 树上传播的方式不一样吗 是否有一些设备仅响应这些事件之一 我最初以为这只是pointerdown在触摸设备或笔中触发 但是onc
  • 如何在反应路由器的登录页面中隐藏导航栏

    我想隐藏登录页面中的导航栏 我确实做到了 但我在其他页面上看不到导航栏 此代码是 My App jsx 文件的一部分 我在 App 的状态中创造了历史 当路径名是 或 login 时 我会隐藏导航栏 有用 但随后我输入了 ID 和密码 然后
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • Chrome 扩展程序导致 DOM 闪烁,该扩展程序会在页面加载之前删除 DOM 元素

    我正在编写一个 chrome 扩展 我想在页面加载之前删除内容 例如this http tech blog tomchambers me 2016 01 13 How to write a simple page rewriting Chr
  • 多个模板槽的相同槽内容

    在vuejs中 有没有一种方法可以为多个插槽设置相同的内容 而无需复制粘贴 So this
  • 我以为我了解范围

    有人可以告诉我为什么 x 的最后一次记录等于0而不是1 我想因为它是在函数之外声明的 所以它具有全局范围 然后在函数中它的值设置为1并且该值将保持原样一个全球性的 我知道函数内的第一个 x 值是全局的 因为没有 var 关键字声明的任何变量
  • 未处理的 Promise 拒绝:push.on 不是函数

    我正在使用离子2 我得到这个打字稿error当尝试设置推送通知时 我从教程中复制了此示例代码 因此预计它可以工作 我一定有什么问题 任何想法请 Unhandled Promise rejection push on is not a fun
  • 将变量从一个 jsp 发送到另一个 jsp

    我有一个 JSP 文件jsp 1 jsp和另一个 JSP 文件jsp 2 jsp 我已经包括了jsp 2 jsp in jsp 1 jsp using 现在我需要某个元素上的单击事件 在该事件中 我想将字符串变量传输到包含的 jsp 中 假
  • up() 和 down() 与 Ext.getCmp()

    我很困惑我需要在 up down 和 Ext getCmp ID 之间使用哪一个作为 grep 对象 对我来说 定义对象的 ID 并通过 Ext getCmp ID 检索对象更容易 而且代码看起来更干净 例如 console log thi
  • Netlify 正在显示我的 Gatsby 网站的 html 版本

    网站建设位于https 5efbc255ca51be00080b5219 epic raman 086510 netlify app https 5efbc255ca51be00080b5219 epic raman 086510 netl
  • jquery 自动完成额外参数

    我使用 jquery 自动完成 我可以将 extraParams 传递给 asp net 中的 webservice 吗 我的 WebMethod 将如何获得它 您传递一个额外的参数函数 如下所示 controlId setOptions
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • 使用预先存在的数据库创建 PhoneGap iOS 应用程序

    我最近开始开发一个使用 PhoneGap 版本 2 8 0 作为药物查找器的应用程序 过去 我创建了该工具的 Web 版本 它使用 jQuery Mobile 和 PHP 来访问远程 SQL 数据库 PhoneGap 似乎是一个很有吸引力的
  • Javascript 或 Coffeescript 中的“Bucket Fill”算法

    我正在编写一个小coffeescript js应用程序 允许用户设计图标 16x16像素或32X32像素 该图标实际上是一个带有颜色单元的二维数组 单元格可以有颜色或为空 我希望用户能够使用 桶油漆 工具填充空白单元格 代表着 如果用户单击
  • getCompatedStyle 类似于 IE8 的 javascript 函数

    我正在尝试在 Java GWT 代码中编写一个 Javascript 函数 该函数获取以下样式的值 direction fontFamily fontSize fontSizeAdjust fontStyle fontWeight lett
  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更
  • 如何将 JSLint 用于依赖于 JQuery 的代码段?

    我对 Javascript 比较陌生 我想通过 JSLint 运行我周末玩的那段代码 这样它就可以指出我在哪里是个十足的白痴 不幸的是 我收到了大量关于缺少函数声明的错误 这些函数声明是 JQuery javascript 库及其各种插件的

随机推荐

  • 数组的随机打乱

    我需要随机洗牌以下数组 int solutionArray 1 2 3 4 5 6 6 5 4 3 2 1 有什么功能可以做到这一点吗 使用集合来打乱原始类型数组有点过分了 自己实现该功能非常简单 例如使用费舍尔 耶茨洗牌 http en
  • 如何在 Apache httpclient 中使用指数退避策略?

    The docs https hc apache org httpcomponents client dev httpclient cache apidocs org apache http impl client cache Expone
  • 即使我使用 Content-Disposition: inline,PHP 也会强制下载 PDF 文件

    如果可能的话 我正在尝试在浏览器中显示 PDF 而且我知道我可以在 Chrome 中执行此操作 这就是我正在测试的版本 问题是 每次我尝试时 它都会提示下载 我正在使用 PHP 会话 所以我知道发送了一些无关的标头 所以我调用header
  • 使用 System.IO.Ports.SerialPort 类打开串行端口时出错

    我正在尝试使用 System IO Ports SerialPort 类打开并读取串行端口 我将串行端口从工具窗格 Visual Studio 2008 拖到我的 Windows 窗体应用程序上 我已经设置了属性网格 因此我可以在运行时轻松
  • Flutter:如何防止设备方向改变并强制纵向?

    我想阻止我的应用程序改变其方向并强制布局坚持 纵向 在 main dart 中 我放置了 void main SystemChrome setPreferredOrientations DeviceOrientation portraitU
  • 如何在 JVM 上确定任意格式(JPEG、PNG 等)图像文件的尺寸?

    我想浏览一个目录并挑选出所有图像 然后根据它们的尺寸执行一些操作 有哪些库可供我执行此操作 我正在 Clojure 中工作 但 JVM 上可用的任何东西都是公平的 提前致谢 with open r java io FileInputStre
  • 释放 malloc 失败

    我有这样的东西 char temp xyz temp char malloc sizeof somestring xyz char malloc sizeof temp xyz strrchar temp temp does not con
  • 将图像上传到 firebase 实时数据库或存储?

    我正在尝试将图像与其他字符串和双精度数据类型一起上传到 firebase 我现在想到两个选项 一个是将图像 Url 上传到 firebase 实时数据库 当我检索它时 我将检索图像 Url 并将其转换为图像 另一种方法是将图像文件上传到 F
  • 子进程的奇怪行为

    我有一个关于子进程行为的问题 这个测试程序的目的是运行Linux命令echo Hello wc使用管道 我的命令不起作用 结果调用了错误的 c 字符串 预期输出是 command 0 echo command 1 wc 但是 我得到 com
  • Google Apps 脚本 - 处理多个谷歌帐户

    我有一个自定义表单 可以向数据库发出一些请求来验证用户 我注意到 如果我有一个谷歌帐户 它可以正常工作 但如果有多个帐户 就不行了 我注意到的另一件事是脚本不会抛出任何错误 它只是不会从自定义表单返回结果 这就是我的自定义表单的样子 div
  • JUnit 测试期间静态初始化程序不运行

    我这里有一个有趣的 JUnit 问题 JUnit 4 12 我有一个只有静态方法的基类 由于它们的使用方式 它们必须是静态的 我从基类继承了其他类 所以 如果基类是Base 我们有ChildA and ChildB 大多数方法都包含在基类中
  • 如何获取运行任务的队列 - celery

    我是新使用芹菜 有一个问题 我有这个简单的任务 app task name test install queue def test install queue return subprocess call exit 0 shell True
  • 在 iOS13/iPadOS 13 中使用 dylib 调试偶发的应用程序崩溃

    更新到 iOS 13 x iPadOS 13 x 后 我们发现最近的 Testflight 版本偶尔会发生崩溃 我们还没有看到使用我们 13 之前发布版本的用户的报告 但似乎还没有多少人更新到 13 所以我们真的不知道 该应用程序是一个带有
  • 无法解析 \node_modules\electron 中的“fs”

    我正在使用电子反应样板并想使用电子dialog在 App tsx 中 const dialog require electron remote also tried with import const Hello gt const read
  • 如何判断哪个 Keras 模型更好?

    我不明白使用哪个输出精度来比较我的 2 个 Keras 模型 看看哪个模型更好 我是使用 acc 来自训练数据 之一还是 val acc 来自验证数据 之一 每个时期都有不同的 accs 和 val accs 我如何知道整个模型的 acc
  • R { ggplot2 } 是否可以查询绘图的刻度线是什么?

    使用来自的示例哈德利的网站 http had co nz ggplot2 scale continuous html gt m lt qplot rating votes data subset movies votes gt 1000 n
  • UITextView获取当前行

    有没有办法 欢迎疯狂黑客 将当前行作为 UITextView 的字符串获取 这包括自动换行等 例如 在本例中 该方法将返回 堆栈溢出 这不是很好吗 我 因为这是基于光标的当前行 它还可以根据光标的位置返回 这是我所做的测试 或 这么认为 我
  • gensim 错误:导入错误:没有名为“gensim”的模块

    我尝试导入 gensim import gensim 但出现以下错误 ImportError Traceback most recent call last
  • Django 从 models.py 导入类

    使用这样的文件夹结构 library django wsgi manage py static all my static files library init py models py settings py urls py views
  • 为什么 $(document).blur() 和 $(document).focus() 不适用于 Safari 或 Chrome?

    我正在制作一个计数器 当文档聚焦时它会倒计时 当它处于模糊状态时 它会停止倒计时 它在 FF 中工作 但在 Safari 和 Chrome 中 计数器根本不起作用 Safari Chrome 是否存在兼容性问题 我所使用的是 documen