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.

Pytlik

What was the final solution (if any)? – Joses

@MykaEyl This was a while ago. :) I believe the solution in the end was a design decision to make sure the pop-ups had 'close' links that could be tabbed into and activated to close the DIV. Mousing users could still click anywhere outside the div, but keyboard users had to explicitly choose to close the div. – Pytlik

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

Malaysia

Not sure if it's easier but it'd be an option. Not sure if the div can take focus, though. – Pytlik

that works for clicking, but not tabbing out. In your example, show the div, then click on the text (so that focus is inside the div) then hit TAB to tab out of the div. I need the div to disappear in both scenarios (clicking somewhere else or tabbing out of the div). The goal is to accomodate keyboard navigation. – Pytlik

..clever! Alas, still kind of a hack, as it's just checking for the tab-key press. I might just have to end up doing that (see above UPDATE section). One could still get out of the div via the keyboard by any number of other means, though. – Pytlik

Answer 2

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

Disapprobation