Question

I have a page with a div element in it. i want when i clicked on outer area of that div element, then fade it out.

but i don’t know how detect area of mouse click.
how detect that mouse click point is out of div area or not??

Answer 1

This is not very complicated – you have two options:
1. Asign onclick event to the outer area.

<div id="outer" onclick="$("#inner").fadeOut();">
    <div id="inner" onclick="event.cancelBubble=true;/*disable bubling*/">Inner Div</div>
</div>

2. Traverse the dom and compare event.target (event.srcElement)

   document.addEventListener("click", function(event) {
       var body = document.body;
       var target = event.target!=null?event.target:event.srcElement;
       var inner = document.getElementById("inner");
       while(target!=body) {
         if(target==inner)    //This means our inner element is clicked - or one of its children
           return false;
         target=target.parentNode;   //Go UP in the document tree
       }
       $("#inner").fadeOut();   //If we got here, none of element matched our inner DIV, so fade it out
   }