IE not firing (window|document).onclick event when clicking on a child iFrame

Question

I've got a simple dropdown menu that I want to hide whenever you click anywhere on the page (not on the menu). This works fine in FF and IE until you add iFrames into the page. The menu doesn't hide in IE when you click on the iFrame. Works fine in FireFox.

I tried using document.onclick and window.onclick.

Any ideas?

Edit: I would prefer not to have to add anything to the iframe. The page is dynamic, and different iframes could be loaded after the menu has already been created. It would be a hassle/undesirable to have to constantly watch for new iFrames and attach events to them. Yes I am aware of jQuery.live, but we don't use jQuery.

I assume this behaviour is possible since it works on FireFox, I just feel as though I may just be attaching the listener to the wrong event type or the wrong element.

Answer 1

On the parent page, you can search for iFrames in the page and add an onfocus event for them. That event will be fired when the user clicks within the frame.

Answer 2

An alternative would be to have the drop-down menu disappear after a set period of time has elapsed since the mouse or focus was on it rather than requiring a click to dismiss it.

Answer 3

click events bubble up to the owner window and no further. If you want the parent window to find out about clicks on the content inside another frame, you must catch events on its window/document (or have the child document catch clicks and inform its parent document). Yes, it will be a hassle, and jQuery live wouldn't work anyway since it relies on event bubbling.

Alternative approach: when you open a dropdown, also open a transparent ‘shade’ div behind it (but in front of everything else on the page including the iframes), and catch clicks on the shade to close the dropdown.