admin管理员组

文章数量:1313162

I'm not sure why this happens and I would love to get an explanation.

Using jquery's focus method I bind to the window focus event. This is a working example (copy paste into a html file and open in a browser. Doesn't work in jsfiddle or jsbin, for some reason)

<!DOCTYPE html>
<html>

<head><script src=".6.4/jquery.min.js" type="text/javascript"></script></head>

<body>
    <p1>Here:</p1>
    <div id="here" >Why</div>
</body>
<script>
    $(window).load(function() {
        $(window).focus(function() {console.log("focus");});
        $(window).blur(function() {console.log("blur");});
    });
</script>
</html>

When the browser regains focus the function runs twice and 'focus` is printed into the console twice. Any idea why this happens?

The end goal, btw, is to stop a timer from running whenever the user leaves the browser to an app or another tab.

UPDATE

Running on the latest (dev) version of chrome. I'll test it on firefox and write if it's different there.

UPDATE 2 Interesting fact - Doesn't happen on firefox. Maybe its a bug with chrome.

I'm not sure why this happens and I would love to get an explanation.

Using jquery's focus method I bind to the window focus event. This is a working example (copy paste into a html file and open in a browser. Doesn't work in jsfiddle or jsbin, for some reason)

<!DOCTYPE html>
<html>

<head><script src="http://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script></head>

<body>
    <p1>Here:</p1>
    <div id="here" >Why</div>
</body>
<script>
    $(window).load(function() {
        $(window).focus(function() {console.log("focus");});
        $(window).blur(function() {console.log("blur");});
    });
</script>
</html>

When the browser regains focus the function runs twice and 'focus` is printed into the console twice. Any idea why this happens?

The end goal, btw, is to stop a timer from running whenever the user leaves the browser to an app or another tab.

UPDATE

Running on the latest (dev) version of chrome. I'll test it on firefox and write if it's different there.

UPDATE 2 Interesting fact - Doesn't happen on firefox. Maybe its a bug with chrome.

Share Improve this question edited Oct 31, 2011 at 12:45 Ben asked Oct 31, 2011 at 12:36 BenBen 10.3k21 gold badges103 silver badges158 bronze badges 4
  • 2 This works for me. Which browser are you using? – Phil Booth Commented Oct 31, 2011 at 12:40
  • @PhilBooth Chrome (Updated the question) – Ben Commented Oct 31, 2011 at 12:46
  • @Derek As I've written - I'm trying to see if the browser is in focus not #here – Ben Commented Oct 31, 2011 at 12:47
  • i think maybe it's the console itself. :D – Muhammad Umer Commented Jul 8, 2013 at 2:37
Add a ment  | 

5 Answers 5

Reset to default 3

I had this same problem. My fix for this was using lodash's debounce() function (https://lodash./docs/#debounce). This was my fix:

var debouncedFocus = _.debounce(() => {
  console.log('focussed');
}, 250, {leading: true, trailing: false});

$(window).on('focus', debouncedFocus);

live() has been deprecated. Use on() instead.

$(window).on("focus", function(){ alert("focus!"); });

You could try using the live() function.

$(window).live("focus", function(){ alert("focus!"); });

Maybe load() is called twice? You can register these events without .load(). Try this:

<script>
    $(window).focus(function() {console.log("focus");});
    $(window).blur(function() {console.log("blur");});
</script>

Which browser ? Seems to run fine for me.

As a precaution, you can use a javascript variable to make it run only once.

<script>
    var isFocused = false;    
    $(window).load(function() {
        $(window).focus(function() {
           if(isFocused)
                return; 
           console.log("focus");
           isFocused = true;
        });

        $(window).blur(function() {
         console.log("blur");
         isFocused = false;
       });
    });
</script>

If you're simultaneously using Underscore, you can use the _.debounce() method to clamp down repeated events to a single event.

本文标签: javascript(window)focus() runs twice for each focusStack Overflow