Google Chrome duplicates JavaScript 'focus' event

Question

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.net/ffuWT/3/

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

Answer 1

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 comment the consistent part is shifting focus to another window (console in your case).

Check out http://www.quirksmode.org/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 compatibility table it's noted that

Safari Windows fires two focus events.

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

Answer 2

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.