焦点选项卡事件Javascript答案

【问题标题】：Focus tab event Javascript焦点选项卡事件Javascript
【发布时间】：2016-05-09 16:00:29
【问题描述】：

我如何检测用户 focus 何时在此选项卡中以及用户何时取消关注当前选项卡我正在尝试这个代码：

window.onfocus = function() {
    alert('Got focus');
}

为什么这不起作用？

【问题讨论】：

标签是指 HTML 元素？你在使用组件库吗？或者标签是指浏览器的标签？
Is there a way to detect if a browser window is not currently active?的可能重复
你在什么浏览器上试试这个？
@ninjagecko 的回答也非常简单：stackoverflow.com/questions/2720658/…

标签： javascript

【解决方案1】：

这是用于跟踪当前选项卡何时获得或失去焦点的 API。你可以这样拼写，它几乎适用于所有浏览器。我建议使用以下语法：

window.addEventListener('focus', function(e){
    console.log('Focused');
})

window.addEventListener('blur', function(e){
    console.log('Unfocused');
})

我能想到的不触发事件的一个原因是您主要是坐在浏览器控制台中。如果开发工具是您实际“聚焦”的对象，则窗口不会接收焦点或蓝色事件。

【讨论】：

如果您可以提供 JSFiddle，我会认为这是一个更完整的答案。
在结果面板内部单击时应显示“聚焦”，在外部单击时应显示“未聚焦”。这也适用于更改标签。 jsfiddle.net/hy9yL2ad
恐怕它不适合我！版本 47.0.2526.111（64 位）Chrome。
奇怪，它绝对应该适用于您的 Chrome 版本。您是否尝试将其他类型的事件附加到窗口或 DOM 元素，您是否得到了结果？控制台有错误吗？

【解决方案2】：

对于特定的 HTML 元素.....

 $("#elementId").focus(function(){
       //fire when element is focused...
  });
  $("#elementId").blur(function(){
      //fire when element is unfocused...
  });

对于窗口.....

$(function() {
    $(window).focus(function() {
        console.log('Focus event');
    });

    $(window).blur(function() {
        console.log('un focus');
    });
});

【讨论】：

【解决方案3】：

您要查找的事件是visibilityChange https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange

当事件被触发时，你可以通过document[hidden]检查页面是否可见。有关工作示例，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API。

【讨论】：

这是跨浏览器解决方案吗？
虽然这适用于很多情况，但它实际上是跟踪可见性，而不是关注什么。因此，如果您打开了两个浏览器窗口，并选择了第二个，则不会触发该事件。当然，这真的取决于具体情况。
浏览器支持显示在第一个链接的底部，但所有最近的浏览器都支持它。