How to bind a click listener not on an element in JavaScript

Question

I want to pop out a menu, and when the user click positions other than the menu, the menu will hide. Also, if the click is on some nodes who have click listeners, those handling functions will not be triggered. I can use a transparent mask layer to implement this, but is there any easier way (since I use jQuery)? I tried the :not selector

$(document).on('click',':not(.menu)',function(e){
$('.menu').hide();
});

But it seems just not working (also should I add a e.stopPropgation() here)?

Answer 1

I would write something like this:

$(document).on('click', function(e){
  if($(e.target).parents(".menu").length == 0)
     $('.menu').hide();
});