window.click event issue in JQuery

Question

I have a common scenario in which when clicking the window dismisses a popup div. The code I use is

   $(window).load(function (){
   $('.popupstyle').live("click", function(e){
       return false;
    });
    });
   $(document).ready(function(){
   $(window).click(function(){
   $('.popupstyle').hide();
    });
  });

but the problem is that no postback event of controls Like LinkButton is working on popup div then. return false in click event of the popup div creates a problem.It fuses everything on popuop div. Don't understand what to do fixing one thing disturbs the other. also the live event does not work on first click. Any suggestions

Answer 1

The cause of this is event bubbling , where the event from the child element bubbles to the parent element..

One way of preventing this is to use e.stopPropagation() when you encounter the target element

CHECK FIDDLE

Answer 2

@sushanth is right. Its because of event bubbling, which is an important core js concept. And while it can trip you up in situations with 2 listeners ($('.popupstyle').live("click", $(window).click) we can also use bubbling to our advantage and perform the same task with a single listener ($(window).click).

  $(window).click(function(e){
       if( ! $(e.target).hasClass('popupstyle') ){ $('.popupstyle').hide(); } 
  });

DEMO