JQuery $(window).focusout issue

Question

The problem is, I'm making a program like a chat, that needs to know if the user has left the window, or changed to another window or tab, to allow other users see that the other user is not seeing the page right now.

I thought the window event focusout would solve my problems, however, there are a few issues with it.

First:
it does not fire only when the user leaves the window, if they focus on a input field then click anywhere else in the page, the event fires. Obviously that's intolerable.

I managed, in Firefox, a way around that. On Firefox, when that happens, the browser fires the focusout event once. If you really leave the window however, it fires it twice. So, a little programming made the magic.

Then came the second problem:
Chrome, and I believe other browser might behave the same, only fires focusout event once, no matter what you do. Leaving the window, changing focus from inputs to page, it's the same, so, my programming didn't worked there.

Does anyone know a way to simulate the desired behavior? Or a way to make Chrome and other possible browser to behave like Firefox or whatever?

I don't think that what you want to do is actually possible with today's browsers. — Pointy, Feb 28 '11 at 14:52
Did you try `$(document).bind("mouseleave", function(){...})`? — Mottie, Feb 28 '11 at 14:56
@Pointy The `window.onblur` handler works just fine. The blur event fires at the window object whenever the user switches to another tab. — Šime Vidas, Feb 28 '11 at 15:09
@Šime Vidas well I've had problems with it, but that was some time ago and I haven't tried lately. If it works, then that's good news for the OP at least :-) — Pointy, Feb 28 '11 at 15:11

Šime Vidas · Accepted Answer · 2011-02-28T15:03:42.390

10

Use blur instead of focusout:

$(window).blur(function() {
    // code
});

The difference is that focusout bubbles up the DOM tree and blur doesn't. If you set focusout on the window object, then all the blur events that occur on page elements will also trigger that handler which is something that you don't want.

The difference is that focusout (when set on the window object) captures all blur events that fire on the page (at any element). In contrast blur (when set on the window object) does not capture those blur events.

Live demo: http://jsfiddle.net/simevidas/taRG6/

edited Feb 28 '11 at 15:03

answered Feb 28 '11 at 14:58

Šime Vidas

182,163
62
281
385

I thought that jQuery would already use blur for Firefox and Chrome and focusout form IE, that seemed to be an issue with that. – Uriel Bertoche Feb 28 '11 at 15:13
@Uriel focusout and blur are two different event types (both defined in the [DOM 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/)). jQuery does not mix them together. – Šime Vidas Feb 28 '11 at 15:29

score 1 · Answer 2 · edited May 23 '17 at 11:47

1

Does this answer it? Talks about using blur event

JavaScript / jQuery: Test if window has focus

edited May 23 '17 at 11:47

Community

1
1

answered Feb 28 '11 at 14:52

jenson-button-event

18,101
11
89
155

Rémy THEROUX · Answer 3 · 2012-04-16T09:46:15.470

0

I answer the question, this solution works perfectly except that i catch the event twice.

BLUR event on window is fired only when i click another brower tab or when i switch to another application.

edited Apr 16 '12 at 09:46

answered Apr 13 '12 at 08:58

Rémy THEROUX

21
5

JQuery $(window).focusout issue

3 Answers3

Linked