I've noticed a strange issue with how Chrome handles javascript focus event. The fact is, it continuosly triggers focus event, even if it occurs only once. I've made a bit of research here and found questions where people run into the same issue when using alert(). When they close the alert window, the focus returns to their inputs and a handler triggers again and again. In my case, the problem is different, as I am using console.log(), and from time to time I get the same log 2 or even 3 times. I've noticed it usually happens when I clear the console, and then focus on an element. When I try to repeat it, it does not occur any more.

The scenario:

1. Clear console
2. Focus on element (2 or 3 console messages)
3. Focus on other identical element or unfocus and focus again on the same one (no problems)
4. Clear console
5. Focus on element (2 or 3 console messages - the problem is back!)

I've created a jsfiddle, please check it out: /

The question is, what is the reason for this issue and how can I work around it?

I've noticed a strange issue with how Chrome handles javascript focus event. The fact is, it continuosly triggers focus event, even if it occurs only once. I've made a bit of research here and found questions where people run into the same issue when using alert(). When they close the alert window, the focus returns to their inputs and a handler triggers again and again. In my case, the problem is different, as I am using console.log(), and from time to time I get the same log 2 or even 3 times. I've noticed it usually happens when I clear the console, and then focus on an element. When I try to repeat it, it does not occur any more.

The scenario:

1. Clear console
2. Focus on element (2 or 3 console messages)
3. Focus on other identical element or unfocus and focus again on the same one (no problems)
4. Clear console
5. Focus on element (2 or 3 console messages - the problem is back!)

I've created a jsfiddle, please check it out: http://jsfiddle/ffuWT/3/

The question is, what is the reason for this issue and how can I work around it?

• javascript
• jquery
• google-chrome
• focus

• 1 Works as expected (not the way you describe it) for me, running Chrome 17.0.963.78 m – m90 Commented Mar 13, 2012 at 8:29
• I'm not able to recreate your problem, and I don't see how clearing the console in #4 would create a problem with events firing twice? Have you tried stopping the event from bubbling in your function? Try adding e.stopPropagation() – Rory McCrossan Commented Mar 13, 2012 at 8:30
• I am able to recreate the problem. e.stopPropagation doesn't solve it for me. – Ben Lee Commented Mar 13, 2012 at 8:32
• Actually, I am not able to recreate the problem. I am able to create a similar problem: focus on an element. Then alt-tab to another window (4 or more focus events fired) then alt-tab back (2 or more focus events fired) – Ben Lee Commented Mar 13, 2012 at 8:32
• @RoryMcCrossan Yes, I've tried - with no luck. – noname Commented Mar 13, 2012 at 8:49

2 Answers 2

Creepy how these things can happen. I've run into this exact issue at work today, but have quickly written this off suspecting dodgy event listening and propagation in a 3rd-party plugin (jQuery customInput). I'll double-check your jsfiddle tomorrow.

I'm unable to recreate your exact output on my currently available setup (Chrome v17 on a Mac) but I do have a theory to share. In your scenario and in Ben Lee's ment the consistent part is shifting focus to another window (console in your case).

Check out http://www.quirksmode/dom/events/blurfocus.html under "Window + focusable element":

If the window is sent backward while a focusable element is focused, blur events should fire on both. If the window is brought forward again, focus events should fire on both.

And next, in the patibility table it's noted that

Safari Windows fires two focus events.

Maybe Chrome finally got this "feature" too, ing from the Webkit family and all?

I was able to recreate the problem (using your jsFiddle) and from what I can see it only occurs when you click the select without having focus on/in the result frame.

Click within the frame but not on the selects before you click to expand one of the selects and you´ll only see one line logged.

You can also append /show to the jsFiddle URL to view the result in a separate window.

It seems like focusing the window by clicking on a select control triggers the event multiple times.

Open this demo and unfocus the browser window (by clicking the desktop, taskbar or another window) and then click on one of the selects to expand its options and view the console.

Using Chrome 17.0.963.79 m.