Question

Here is what I am doing.

I am displaying a box, after click at a link
CSS

#toshow { display:none; }

HTML

<a href="#" id="mylink" >Link</a>
<div id="toshow">Here is my content</div>

Jquery

$(document).ready(function() {
     $("#mylink").click(function() { 
         $("#toshow").show();
     });
});

Now I want to catch a event, where the user clicks the mouse, and if the portion the user is clicking is not either the link or the division, then the division should hide again.

How to do this?

Answer 1

$(document.body).click(function(e){
   var $box = $('#mylink');
   if(e.target.id !== 'mylink' && !$.contains($box[0], e.target))
      $("#toshow").hide();
});

You need to check for click events which bubbled up to document.body. In that event handler you look for the event target id and compare it with the element you do NOT want to include, plus all elements which are children of that excluded element.

@Starx: (question in the comments)
$.contains() checks if a DOM node contains anther node you specify. So

!$.contains($box[0], e.target)

means, if e.target does NOT contain the node $box[0]
see http://api.jquery.com/jQuery.contains/