So I'm creating a javascript menu and trying to implement an onblur event for when a user clicks something outside the menu so it will collaspe.
To implement this, I simply attached an event to the window and looked for any clicks and if it nor its parents elements didn't meet a certain criteria then I would close the menu.
This works fine until I have an iframe and a user clicks inside the iframe. I tried attaching events to this and nothing seems to be working. Furthermore, I looked alittle more and if i attached a click event the the iframe's body that could possibly create a cross domain scripting vulernability. Does anyone have any ideas??
Not sure but you might be able to attach an onblur to the window object and that should catch any clicks outside of the document, such as an iframe or even outside the browser. You'll just have to work with that to appropriately function along side the onclick.
I'm not sure why you are looking for mouse clicks. It seems a bit backwards to me. You should consider simply using the onmouseout and onmouseover events for your menu instead.
Here is a quick example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Test</title>
</head>
<body>
<script type="text/javascript">
function displayMenu(menuListBlockID, menuTextBlockID) {
var menuTextBlock = document.getElementById(menuTextBlockID)
menuTextBlock.style.backgroundColor = "green";
var menuListBlock = document.getElementById(menuListBlockID);
menuListBlock.style.display = "block";
}
function hideMenu(menuListBlockID, menuTextBlockID) {
var menuTextBlock = document.getElementById(menuTextBlockID)
menuTextBlock.style.backgroundColor = "#C00000";
var menuListBlock = document.getElementById(menuListBlockID);
menuListBlock.style.display = "none";
}
</script>
<div id="menu">
<div id="firstMenuItem" onmouseover="displayMenu('firstMenuItemList','firstMenuItemText')" onmouseout="hideMenu('firstMenuItemList','firstMenuItemText')" style="float:left">
<span id="firstMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;" >Menu Item 1 |</span>
<div id="firstMenuItemList" style="display:none;color:White; border:solid 1px green; padding:2px;">
<a href="Test.Html">One</a><br />
<a href="Test.Html">Two</a>
</div>
</div>
<div id="secondMenuItem" onmouseover="displayMenu('secondMenuItemList','secondMenuItemText')" onmouseout="hideMenu('secondMenuItemList','secondMenuItemText')" style="float:left">
<span id="secondMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;">Menu Item 2</span>
<div id="secondMenuItemList" style="display:none;color:White; border:solid 1px green;">
<a href="Test.Html">Three</a><br />
<a href="Test.Html">Four</a>
</div>
</div>
</div>
</div>
</body>
</html>
Please take note of how I've grouped the menu items. I have a main menu DIV to group all of the menu items together. Each menu item has it's own DIV to group the title for the item and the actual menu links together. The onmouseover and onmouseout events are applied to the menu item block. This means that whenever the end user hovers over anything within the menu item block it will remain open.