clicking on everything except

Question

I want to create an effect like in facebook when you have opened a menu with options, help and logout. It works this way.

wherever you click on the page except of that menu, it closes. I have tried this

$("body").not("#myMenu").click(function() {
   // hide menu
});

but this fails, because it hides hides menu when I am clicking it. What can be the problem and how to solve it?

May be there are other ideas how to handle that?

score 4 · Accepted Answer · edited May 23 '17 at 12:25

4

I think this post should help you out:

How do I detect a click outside an element?

The key is stopPropagation().

edited May 23 '17 at 12:25

Community

1
1

answered Mar 06 '12 at 13:42

Ayman Safadi

11,502
1
27
41

score 1 · Answer 2 · answered Mar 06 '12 at 13:43

Adding event handlers to every single element in the body would be very excessive. I would use a DIV overlay on top of the content with z-order 10 and put the window on top with z-order 20. All you would need is a single event handler on the DIV overlay, which would be the full size of the browser window.

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

You can use Ben Alman’s jQuery clickoutside plugin. Example:

// Hide the modal dialog when someone clicks outside of it.
$("#modal").bind( "clickoutside", function(event){
  $(this).hide();
});

If you’d rather not use the plugin, you could do it yourself by using event.stopPropagation() as described here.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 06 '12 at 13:45

Mathias Bynens

144,855
52
216
248

score 0 · Answer 4 · answered Mar 06 '12 at 14:03

$('#requireddiv').hover(function(){ 
            mouse_is_inside=true; 
        }, function(){ 
            mouse_is_inside=false; 
        });
$("body").mouseup(function(){ 
        if(mouse_is_inside == false) {
            $('#requireddiv').hide();
        } 

    });

I used this to work. Basically it checks all the time if its on the area or not, when its not on the area and the mouse button is clicked, it checkes if the mouse is inside the area and if it's not it will hide this div

clicking on everything except

4 Answers4