所以我正在创建一个 javascript 菜单，并尝试在用户单击菜单外的内容时实现一个 onblur 事件，这样它就会崩溃。
为了实现这一点，我只是将一个事件附加到窗口并查找任何点击，如果它或其父元素不符合特定条件，那么我将关闭菜单。
在我有一个 iframe 并且用户在 iframe 中单击之前，它工作正常。我尝试将事件附加到此，但似乎没有任何效果。此外，我看了一点，如果我将点击事件附加到 iframe 的主体，可能会产生跨域脚本漏洞。有没有人有什么想法？？
最佳答案
我不确定您为什么要寻找鼠标点击。 对我来说似乎有点倒退。 您应该考虑简单地使用 onmouseout和 onmouseover而是为您的菜单设置事件。
这是一个简单的例子:
<!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>
请注意我是如何对菜单项进行分组的。我有一个主菜单 DIV 将所有菜单项组合在一起。每个菜单项都有自己的 DIV，用于将项目的标题和实际菜单链接组合在一起。 onmouseover 和 onmouseout 事件应用于菜单项 block 。这意味着只要最终用户将鼠标悬停在菜单项 block 内的任何内容上，它将保持打开状态。
关于asp.net - Javascript 菜单 OnBlur 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1196147/