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.
Whether this is a significant problem depends on the makeup of the rest
of the page.
That alternative is to prevent the event from bubbling up from the
floating div. That means that the floating div will catch all onClick
events associated with it and its children and prevent them from
reaching the body's onclick handler.- Hide quoted text -
- Show quoted text -
The request was to hide the div if anything on the page (Image,
button, link, etc.) was clicked other than within the div in
question.
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.
Of course you could do onclick="window.event.cancelBubble = true;"
inside the hide able div, but you would still need a function that
hides the div on the body. Both my last post and the following code do
the same thing, just in different ways.
Example of cancelBubble in div:
--------------------------------------------------------------------------------------
<html>
<body onclick="HideDiv(event)">
<a href="Javascript: ShowDiv()">Show Div</a>
<div id="floating"
name="floating"
style="border:solid 2px red;width: 200;height:200;display:none;"
onclick="window.event.cancelBubble = true;">
WELCOME
<div>
<input id="test" name="test" value="test" onclick="alert('u did
it')">
</div>
</div>
<BR><BR>
<img src="pagerror.gif" onclick="alert('hi')">
<input type=button value=test onclick="window.event.cancelBubble =
true; alert('dont press me')">
<Script>
var myFloatingDiv = "floating"
function ShowDiv() {
document.getElementById(myFloatingDiv).style.display =
"block";
}
function HideDiv(e) {
document.getElementById(myFloatingDiv).style.display = "none"
}
</script>
</body>
</html>
