窗口是否存在焦点的浏览器事件？-解网

问：

有没有办法，当我单击浏览器并使其聚焦时，可以运行一次方法？然后，当浏览器失去焦点，然后重新获得焦点时，只需运行一次该方法。

JavaScript jQuery

答：

102赞 Daniel Vandersluis 8/14/2010 #1

可以在对象上附加和事件处理程序，以跟踪窗口是否获得焦点（请参阅 http://jsfiddle.net/whQFz/ 以获取一个简单示例）。适用于当前浏览器上下文（因此可以是窗口、选项卡、框架等）。focusblurwindowwindow

注意：每次窗口获得焦点时都会触发该事件，每次失去焦点时都会触发该事件。将焦点从窗口移开的一个例子是窗口。如果尝试在 onfocus 事件处理程序中发出警报，则会收到无限循环的警报！focusbluralert

// Set global counter variable to verify event instances
var nCounter = 0;

// Set up event handler to produce text for the window focus event
window.addEventListener("focus", function(event) 
{ 
    document.getElementById('message').innerHTML = "window has focus " + nCounter; 
    nCounter = nCounter + 1; 
}, false);

// Example of the blur event as opposed to focus
// window.addEventListener("blur", function(event) { 
// document.getElementById('message').innerHTML = "window lost focus"; }, 
// false);

6赞 Tomáš Fejfar 12/7/2013

浏览器兼容性如何？

1赞 Krisztián Balla 10/1/2018

@TomášFejfar：我在 IE、Firefox、Chrome 和 Edge（最新版本）中进行了测试。他们似乎都正确地实现了这一点。例如，点击搜索或打开新选项卡，所有这些都会执行该事件。Ctr+FCtrl+Twindow.blur()

0赞 Krisztián Balla 10/1/2018

一种不起作用的情况是，当您在调试器中设置断点并命中断点时。window.blur()

0赞 e18r 7/4/2020

@JennyO'Reilly，这可能是设计使然

0赞 Max Waterman 2/1/2021

Blur 似乎不适用于 android（根本无法正常工作？此外，焦点仅在窗口首次聚焦时起作用。

19赞 Brett Weber 7/17/2014 #2

$(document).ready(function() { $(window).one("focus", SomeFocusMethod); } );

var SomeFocusMethod = function()
{
    // do stuff
    $(window).one("blur", SomeBlurMethod);
}

var SomeBlurMethod = function() 
{ 
    // do stuff
    $(window).one("focus", SomeFocusMethod); 
}

7赞 Brett Weber 7/19/2014

请附上反对票的评论，因为至少在我看来，这是对这个问题的可接受的补充。

0赞 mas-designs 4/16/2015

这不是一个可接受的答案，因为没有 .one（）方法，只有一个 .on（）方法，我已经纠正了你的答案。

23赞 Lindsay 6/3/2015

jQuery中有一个“one”方法，它非常方便：api.jquery.com/one

3赞 Brett Weber 6/8/2015

我的答案是可以接受的，而且是正确的答案。它为每个事件应用一个时间事件。显然，经验中的情况会增加代码的要求，但 one（）作为函数是捕获相关事件的方法

3赞 NateDSaint 7/2/2015

没有看过的人可能只是认为这是一个错别字。你的答案很好，但前提是你不希望这种情况发生，当用户离开并返回以再次聚焦窗口时，而无需通过一个调用链重新绑定。

11赞 Pylinux 11/10/2014 #3

如果你的目标是比 IE9 更新的浏览器，你应该真正使用“页面可见性 API”javascript 浏览器 api： https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

9赞 Domi 3/9/2015

当浏览器窗口仍然可见但不在焦点中时，这无济于事。

1赞 prashantsahni 8/27/2019 #4

function blinkTab() {
    const browserTitle = document.title;

    const stopBlinking = () => {
        document.title = browserTitle;
    };

    const startBlinking = () => {
        document.title = 'My New Title';
    };

    function registerEvents() {
        window.addEventListener("focus", function(event) { 
            stopBlinking();
        }, false);

        window.addEventListener("blur", function(event) {
            setInterval(() => {
                startBlinking();
            }, 500);

        }, false);
    };

    registerEvents();
};


blinkTab();

0赞 talsibony 10/7/2021

我认为您需要在 stopBlinking 函数中使用清除间隔

上一个：JavaScript / jQuery：测试窗口是否有焦点

下一个：DateTime.Now - 一天中的第一分钟和最后一分钟

窗口是否存在焦点的浏览器事件？

Is there a browser event for the window getting focus?

评论

评论

评论

评论

评论