Onblur event mistakenly fires in IE when parts of popup document are clicked

I have a bunch of small pop-up pages that are designed to self-close when they lose focus - i.e. the user clicks on the parent document.

Unfortunately in IE8, the blur also occurs when the user starts to fill out an input form inside the pop-up page. Indeed clicking anywhere inside the form causes this, or even when the user accidentally clicks on some text. It seems these items are not part of the pop-up document.

How can I make them so?

Here's my blur code (inside a .js script) that I use on the several pop-ups:

var fClose=0 

onload=function() {   
 fClose=0  
 setTimeout("doClose()",111);  
 document.onblur=Blur_Me;  
 document.onfocusout = Blur_Me;  
}  

function 开发者_如何转开发Blur_Me(){  
 fClose=1;  
 setTimeout("doClose()",111);  
}    
function doClose(){  
 if(fClose)close();  
}

Instead of using blur() you can use jQuery's focusin() and focusout() handlers.

The focusin event is sent to an element when it, or any element inside of it, gains focus.

The focusout event is sent to an element when it, or any element inside of it, loses focus.

These are distinct from blur() in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).