• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 635
  • Last Modified:

What is triggering window.onBlur ???

Hi all,

I have a very elaborate web application that is built on ChatZilla.  I am tapping into the window.onFocus and window.onBlur hooks to accomplish something.  It all works well, except for this strange problem:

In IE 6 only, window.onBlur is not triggered when the window loses focus.  Rather, once the window regains focus, window.onFocus is called immediately followed by window.onBlur (usually the same millisecond, but up to ~20 ms later).

My question is:  any general ideas on tracing back to what is causing this onFocus/onBlur activity?  It has something to do with the application and not the environment, because this does not occur under the same circumstances with a test app, like this:

<script type="text/javascript">

var i = 0;

function prependText(id, text)
    var el = document.getElementById(id);

    el.innerHTML =  "<p>" + ++i + ". " + text + "</p>" + el.innerHTML;

window.onblur =
function window_onblur ()
    prependText("test", "BLUR");

window.onfocus =
function window_onfocus ()
    prependText("test", "FOCUS");

hello world
<span id="test"></span>

Unfortunately the app consists of many files and it's a company proprietary thing, so I can't post much code.  I'm just looking for general suggestions.  It may be helpful to know that there is a small Java applet embedded in the page (can these applets partake in focus?  are they considered a part of the DOM?).  Is it possible that some element in the document is stealing the focus away from the window (it would seem, in this case, that the window would still have focus).

Thanks for the help!
  • 2
  • 2
1 Solution
This is a strange problem,

if you look at microsoft documentation on the onblur method:

You'll see that it doesnt bubbles and you can't cancel it.

It also says the onblur method will be invoked as soon as you change application or open a second browser window...

It seems more like the onblur method is called but that the handler is not doing what it is supposed to do.

If you bypass the code's logic and put an alert() in the onblur method, is it triggered ?
mistagitarAuthor Commented:
I am testing with simple alert() or other output methods, so it isn't the code logic.

Here's an odd update:

I now test a flag variable in the onBlur handler to see if it's within 100ms of the last onFocus, and if it is, then to ignore it and call window.focus (thereby leaving the window focused as it should be).  Everything then behaves properly until you click anywhere inside the window, at which time onBlur is called.  Strange huh?  It's almost like the next child of window is taking focus (can document or one of its high children take focus from window?)

Thanks for the feedback,
mistagitarAuthor Commented:
Well, after a week of digging I couldn't find an elegant solution.  It may have been easier if onBlur and onFocus bubble, but they don't in IE.

It seems that the elements of the page (table cells, form inputs, etc.) obtain focus when clicked, as they should, but in IE this removes focus from the window object.  Whether or not this should happen is debatable, but here is my workaround:

window.onblur =
function window_onblur (e)
    if (!e)
        e = window.event;

    // if the blur was triggered by a click within the dimensions of the window
    // then it was a "false blur" and we re-focus the window (only in IE)
    if (isIE())
        var x = e.clientX;
        var y = e.clientY;
        var w = document.body.clientWidth;
        var h = document.body.clientHeight;

        if (x >= 0 && x <= w && y >= 0 && y <= h)
            return false;

Hopefully this helps someone.

Glad you found it out, I was clueless on that point ;)

PAQed with points refunded (500)

EE Admin
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now