jquery focusin() and preventing bubbling.

Question

UPDATE 2:

I slept on it and then whipped up some sample code to try and further figure out the issue.

Here's a sample using the console.log of firebug to show you which object is triggering the focusin event:

http://jsbin.com/axefo3/11

1) click the first link: yellow div shows 2) hit the tab key: It should tab into the link within the yellow div

It does that, but then it triggers the focusin event and, for some reason, it appears to bubble up again to the red div, which is told to then close the yellow div.

This is even after I've told the yellow div to not propogate focusin events:

$('#innerDiv').focusin(function(e){e.stopPropagation()});

I then tried attaching the focusin event on the parent div only AFTER I focusin on the inner div.

http://jsbin.com/axefo3/16

What happens there is that tabbing to the first link in the inner div does set up the focusin event on the parent div. This is good! But then tabbing to the very next link within the innerdiv bubbles up the focusin event again closing the div.

So, I guess I'm still stumped. It does appear that I can not stop focusin from bubbling up. Thoughts? Theories?

Original post below...

============================

I'm showing a div via an onclick event. If you click outside the div, I want to hide it. To do so, I'm binding a one time click event on the body:

$('body').one('click.myDivPopup', function(e) {
    ...close my div...
});  

Within the div itself, I tell it to not propogate events so that actually clicking within the div won't trigger a click on the body:

$myDiv.click(function(e){e.stopPropagation()});

This works fine as intended.

I also want to hide the div if one tabs out of the div.

My thinking was that in that scenario, I could use a focusin event on the body:

$('body').one('focusin.myDivPopup', function(e) {
    ...close my div...
}); 

Again, I don't want the events to bubble out of the div itself, so added this:

$myDiv.focusin(function(e){e.preventDefault()});

This does NOT work. Changing focus within elements within myDiv triggers the focusin event on the body.

Is this maybe a bug in jQuery? If so is there a better way to accomplish this?

UPDATE:

The issue seems to be that there seems to be no way to determine if the DIV has lost focus, since it can never have focus. My solution logic was to see if something ELSE had focus that was outside the div (hence using focusin) but I'm running into the issue of the focusin events within the div seemingly bubbling out there by triggering it on the body.

For now, I think my solution is going to have to be adding a CLOSE elment to the pop-up and then having people have to explicitly trigger that. Not ideal though, especially for keyboard navigation.

Answer 1

Wouldn't it be easier to display 2 divs. One transparent (invisible) div which covers the whole page and the other you really want to show. Then you just need to set the z-index correct body < invisblediv < contentdiv.

Then register click event for invisible div and when clicked remove both. Finished. Atleast this is how most of those e.g. modal dialog jquery plugins work I guess

Demo http://jsbin.com/uzoyo/3

Answer 2

If you want to use focusin but not utilise event bubbling, why don't you just use focus...?