Question

因此，我正在创建一个javascript菜单，并尝试在用户点击菜单外的某些内容时实现onblur事件，以便它能够进行collaspe。

为了实现这一点，我只是将一个事件附加到窗口并查找任何点击，如果它或它的父元素不符合某个标准，那么我会关闭菜单。

这可以正常工作，直到我有一个iframe并且用户在iframe内部点击。我尝试将事件附加到此，似乎没有任何工作。此外，我看起来更多，如果我附加了一个click事件，iframe的主体可能会创建一个跨域脚本vulernability。有没有人有任何想法？

Answer 1

我不确定您为什么要点击鼠标。对我来说似乎有些倒退。您应该考虑只为菜单使用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事件将应用于菜单项块。这意味着每当最终用户悬停在菜单项块内的任何内容时，它将保持打开状态。

Answer 2

不确定，但您可以将onblur附加到窗口对象，并且应该捕获文档外部的任何点击，例如iframe甚至是浏览器外部。你只需要使用它就可以在onclick旁边正常运行。

Javascript菜单OnBlur问题

2 个答案: