Comment fermer un menu javascript

Je crée des menus déroulants sur lesquels il faut cliquer pour ouvrir. Ce code permet à l'utilisateur d'ouvrir les menus correctement. Le seul problème est que je n'ai pas encore compris comment fermer les menus en cliquant en dehors des menus. J'ai essayé d'ajouter le "document.onclick" montré, mais il prend effet même dans les menus.Comment fermer un menu javascript

Je pense que je dois empêcher que document.onclick soit capturé par d'autres éléments, mais je ne suis pas sûr de savoir comment utiliser cette plateforme. Quelqu'un peut-il me montrer comment?

<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>

Merci d'avance.

J'ai fait des progrès et ont reformulé la question ici: How to stop onclick event in div from propagating to the document?

Source

2010-06-18 dougkramer

Selon que vous avez une mise en page comme ceci:

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

vous pouvez mettre le gestionnaire onClick fermez le menu sur la div avec l'ID "principal" qui devrait fonctionner

Source

2010-06-18 22:04:34 vimist

Merci. Malheureusement, je n'ai pas de mise en page comme ça. J'ai besoin que l'utilisateur puisse cliquer dessus, dessous ou de chaque côté du menu. – dougkramer

Quelqu'un m'a indiqué une solution qui utilise la publicité dEventListener. Dites, le div est le menu. Ce code permet à l'utilisateur de cliquer sur le document en dehors de la div pour faire quelque chose, comme fermer le menu. Cliquer sur la div (disons, sur un lien) ne se propagera pas au document.

<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>

Notez que le troisième argument « faux » à addEventListener signifie « déclencher l'événement lors de la phase de capture », mais la valeur n'a pas d'importance parce que la propagation de l'événement est annulé en menuHandler.

Cette solution fonctionne, mais je voudrais faire plus simplement la même chose, sans addEventListener, ont donc posté une question à How to stop onclick event in div from propagating to the document?

Source

2010-06-19 18:28:56 dougkramer

Comment fermer un menu javascript

Répondre

Questions connexes