ansaurus

Question

Answer 1

A:

Depending on whether you have a page layout like this:

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

you could put the onClick handler to close the menu on the div with the id "main" which should work

Chief17 2010-06-18 22:04:34

Thanks. Unfortunately, I don't have a page layout like that. I need the user to be able to click above, below, or to either side of the menu.

douglas.kramer 2010-06-19 18:08:28

Answer 2

A:

Someone pointed me to a solution that uses addEventListener. Say, the div is the menu. This code allows the user to click on the document outside the div to do something, such as close the menu. Clicking on the div (say, on a link) will not propagate to the 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>

Note that the third argument "false" to addEventListener means "fire the event during the capturing phase", but the value doesn't matter because the event propagation is canceled in menuHandler.

This solution works, but I'd like to do the same thing more simply, without addEventListener, so have posted a question at How to stop onclick event in div from propagating to the document?

douglas.kramer 2010-06-19 18:28:56

ansaurus

tags:

views:

answers:

How to close a javascript menu

related questions