page event to hide floating div

I've got a floating div which becomes visible when a link is clicked. I
want the div to be hidden when the user clicks anywhere on the page except
for whithin the div. What is the best way to do this? Really, I only need
to support ie6+ but cross browser is always nice.

On Jun 3, 11:41 am, "Jeremy" <nos... (AT) please (DOT) com> wrote:

I've got a floating div which becomes visible when a link is clicked. I
want the div to be hidden when the user clicks anywhere on the page except
for whithin the div. What is the best way to do this? Really, I only need
to support ie6+ but cross browser is always nice.

You could use the BODY element's onClick event handler.

However, this is called whenever you click anything on the page, this
handler will get called.

The big questions are

1) Which will get called first, the floating div or the body?
2) How do you prevent the body's handler being called when you click
on the floating div?

http://www.quirksmode.org/js/events_order.html seems to be a pretty
respectable writeup of this very issue

That's a good idea, the other issue that could happen is that the body
could already have an onclick event, in which case I wouldn't want to
overwrite it, I'd have to write code to handle chaining the events, and
restoring the original event after. As well, because I'm doing this as a
resusable component, what if the onclick event gets overwritten by someone
else.

I stumbled uppon the attachEvent and detachEvent
(addEventListener/removeEventListener for mozilla) methods. They allow you
to keep adding events to an element.


"Dan Rumney" <danrumney (AT) warpmail (DOT) net> wrote

On Jun 3, 11:41 am, "Jeremy" <nos... (AT) please (DOT) com> wrote:
I've got a floating div which becomes visible when a link is clicked. I
want the div to be hidden when the user clicks anywhere on the page
except
for whithin the div. What is the best way to do this? Really, I only
need
to support ie6+ but cross browser is always nice.

You could use the BODY element's onClick event handler.

However, this is called whenever you click anything on the page, this
handler will get called.

The big questions are

1) Which will get called first, the floating div or the body?
2) How do you prevent the body's handler being called when you click
on the floating div?

http://www.quirksmode.org/js/events_order.html seems to be a pretty
respectable writeup of this very issue

Lee wrote:
[snip]

That won't do what the OP is looking for in the case that the user
clicks outside of the floating div, but not directly on the page
background... eg on an image or a button.

[snip]

Of course there are instances where this would break. For example: if
a image, button or other element on the page (not in the hidden div)
had script that canceled the bubble.

But, Images and buttons should bubble up to the body onclick event and
fire the HideDiv() function (given that they do not
window.event.cancelBubble = true; as I mentioned earlier). The
HideDiv() function is smart enough to know if the event was fired from
within the div or not.

Doy!

This is just a simple case of Dan being wrong due to late engagement of
brain.

Perhaps I can pretend that this was an attempt at the Socratic Method to
allow you to further explain your code ;o)