As a [wrapper to this great answer from Art](https://stackoverflow.com/a/3028037/1366033), and to use the syntax originally requested by OP, here's a jQuery extension that can record wether a click occured outside of a set element.



    $.fn.clickOutsideThisElement = function (callback) {
        return this.each(function () {
            var self = this;
            $(document).click(function (e) {
                if (!$(e.target).closest(self).length) {
                    callback.call(self, e)
                }
            })
        });
    };

Then you can call like this:



    $("#menuscontainer").clickOutsideThisElement(function() {
        // handle menu toggle
    });

## [Here's a demo in fiddle](http://jsfiddle.net/KyleMit/Fv2fY/)

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area.

Is something like this possible with jQuery?

    $("#menuscontainer").clickOutsideThisElement(function() {
        // Hide the menus
    });


How do I detect a click outside an element?

Please **don't** fire click actions during the `mousedown` event. It ignores the rest of the event pipeline and goes against current user expectations and design practices.

## Problem

Here's a look at the normal order of events that fire for each click type:



    $(document).on("mousedown mouseup click focus blur",function(e) {
      console.log("{" + e.which + ":" + e.type + "}"); 
    });    

[![Click Events][1]][1]

Typically, we handle the very last [`click`][2] event because it signifies the users final intent to proceed with the current action.

> The `click` event is fired when a pointing device button (*usually a mouse's primary button*) is **pressed and released** on a *single element*.

Unfortunately, middle mouse presses do not fire such an event (probably because doing so would force developers listening to the click event to distinguish between multiple possible invocations).  But if we want to wire up actions against the middle click, we should follow the same UX expectations.

## Solution 

We'll listen for `mousedown` events and immediately attach a one time use handler for `mouseup` events.  If the middle key was pressed and if the elements match, we'll [trigger][3] our own [custom event][4] with type `middleclick`, which we'll [seed from the original event][5].

```js
$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
      var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});
```

That'll help separate out determining *if* the middle button was clicked with how we we want to handle it in that case, so we can setup a listener for our custom event type like this:


```js
$(document).on("middleclick", function (e) {
	console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});
```

### Working Demo in [jsFiddle][6] and Stack Snippets:





    $(document).on("mousedown", function (e1) {
      $(document).one("mouseup", function (e2) {
        if (e1.which == 2 && e1.target == e2.target) {
        	var e3 = $.event.fix(e2);
          e3.type = "middleclick";
          $(e2.target).trigger(e3)
        }
      });
    });

    $(document).on("middleclick", function (e) {
      console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
    });

    $(document).on("mousedown mouseup click focus blur",function(e) {
      console.log("{" + e.which + ":" + e.type + "}"); 
    }); 



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

    <div  style="background:#31965a;color:white;width:100px;height:100px;line-height:100px;text-align:center;">
      Click Me!
    </div>






<i>*&nbsp;Tested in Chrome, FF, Edge, & IE11</i>

[1]: https://i.stack.imgur.com/NPwtK.png
[2]: https://developer.mozilla.org/en-US/docs/Web/Events/click
[3]: http://api.jquery.com/trigger/
[4]: https://api.jquery.com/category/events/event-object/
[5]: https://stackoverflow.com/a/9508718/1366033
[6]: https://jsfiddle.net/KyleMit/1jr12rd3/

I have a list with a tags to play some mp3 files onclick. It is working fine when binding on the 'click' event with jQuery:

    $oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
    		   .bind( 'click', function()
    			{ var wh = $j(this).data('wapiHandle');
    			  if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
    			   { return false; }
    			});

When clicking the left mouse button:
It disables default handling when my flash plugin is loaded otherwise it will be opened normally.

BUT:
When I use the scrollbutton of the mouse and click on it, the click event will not fired and the link opens normally.

I have tried to use mousedown or mouseup events but doesn't help, the link always opens normally with the side effect that the music starts playing also with the flash player.

Also `preventDefault()` does not work at all.

Can somebody tell me how to detect the middle mouse button click (scroll button click)?

Thank you for your comments.

PS: I have already tried other solutions about the 'middle button' available on this site.

Tested in all kind of browsers with the same result. 

EDIT:
This also does not work, the link will be opened normally when using the middle mouse button. When using the left mouse button, nothing happen. 

    $oo.bind( 'mousedown click mouseup', function(e)
    { e.preventDefault(); e.stopPropagation(); return false; });




Detect middle button click (scroll button) with jQuery

When you pass in two parameters to [<code>.<b>attr</b>(<i>attributeName</i>,<i>value</i>)</code>][1], the second param sets the value.  You could write a custom extension, similar to [`toggleClass`][2] to conditionally add or [`.removeAttr()`][3] like this:





    (function($) {
        $.fn.toggleAttr = function(attributeName, state) {
            return this.each(function() {
               if (state) {
                 $(this).attr(attributeName,"")
               } else {
                 $(this).removeAttr(attributeName)
               }
            });
        };
    }(jQuery));

Then use like this:



    $(".class").toggleAttr("boolAt", false);

[1]: http://api.jquery.com/attr/#attr2
[2]: http://api.jquery.com/toggleclass/
[3]: https://api.jquery.com/removeAttr/

I have an event listener that I'm trying to toggle between a class (which is working) and a data-selection attribute of true/false (which is not). I have the data-selection attribute for div class="dice" already set to false by default.

    game.selection = function() {
      $(".dice").on("click", function() {
        $(this).toggle(function () {
          $(this).attr('data-selection', true);
        });
        $(this).toggleClass("active");
      }); 
    };