如何关闭javascript菜单

问题描述：

我正在创建必须单击才能打开的下拉菜单。这段代码让用户打开菜单就好了。唯一的问题是我还没有想出如何通过点击菜单外部来关闭菜单。我尝试添加显示的“document.onclick”，但即使在菜单中也会生效。如何关闭javascript菜单

我想我需要防止document.onclick被其他元素捕获，但我不知道如何做到这一点跨平台。有人可以告诉我如何？

<script type="text/javascript"> 
    var lastOpenedMenuId = null; 

    function showMenu(menuId) { 
    if (lastOpenedMenuId != null && lastOpenedMenuId != menuId) { 
     hideLastOpenedMenu(); 
    } 
    setMenuVisibility(menuId, 'visible'); 
    lastOpenedMenuId = menuId; 
    } 
    function hideMenu(menuId) { 
    setMenuVisibility(menuId, 'hidden'); 
    } 
    function hideLastOpenedMenu() { 
    if (lastOpenedMenuId != null) { 
     hideMenu(lastOpenedMenuId); 
    } 
    } 
    function setMenuVisibility(menuId, visibleOrHidden) { 
    var menuElement = document.getElementById(menuId); 
    menuElement.style.visibility = visibleOrHidden; 
    } 
    document.onclick = hideLastOpenedMenu; 
</script> 

<div onmousedown="showMenu('foodmenu')"><a>FOOD</a></div> 
<div id="foodmenu" onmouseup="hideMenu('foodmenu');"> 
    <a href="#meat">Meat</a> 
    <A href="#tofu">Tofu</a> 
</div>

在此先感谢。

我已经取得了一些进展，并已重新这里的问题是： How to stop onclick event in div from propagating to the document?

答

取决于你是否有一个页面布局是这样的：

<body> 
<div id="menu"><!--Menu Stuff--></div> 
<div id="main"><!--Main page stuff--></div> 
</body>

你可以把的onClick处理程序关闭div上的菜单ID为“主”应该工作

感谢的问题。不幸的是，我没有这样的页面布局。我需要用户能够点击菜单上方，下方或任意一侧。 – dougkramer 2010-06-19 18:08:28

答

有人指出我的解决方案，使用广告dEventListener。说，div是菜单。此代码允许用户点击div外的文档来执行某些操作，例如关闭菜单。点击div（例如，在链接上）不会传播到文档。

<head> 
    <script> 
    function menuHandler(event) { 
     alert("div clicked"); 
     // Don't propogate the event to the document 
     if (event.stopPropagation) { 
      event.stopPropagation(); // W3C model 
     } else { 
      event.cancelBubble = true; // IE model 
     } 
    } 

    document.onclick = function() { 
     alert('document clicked'); 
    }; 

    function addListener() { 
     var foodMenuElement = document.getElementById('foodmenu'); 
     if (foodMenuElement.addEventListener) { 
      foodMenuElement.addEventListener('click', menuHandler, false); 
     } else { 
      foodMenuElement.attachEvent('onclick', menuHandler); 
     } 
    } 
    </script> 
</head> 

<body onload="addListener()"> 
    <div id="foodmenu" style="border: 1px solid red;">Click inside this div</div> 
    or click outside the div. 
</body>

注意，第三个参数“假”在对addEventListener的意思是“火在捕获阶段事件”，但价值并不重要，因为该事件传播在menuHandler取消。

此解决方案，但我想这样做同样的事情更简单，不用的addEventListener，于是纷纷张贴在How to stop onclick event in div from propagating to the document?

如何关闭javascript菜单

相关推荐